DjangoZen Icon Collection — Documentation

Complete Integration & Usage Guide
Version 1.0.0 | DjangoZen

Table of Contents

1. Getting Started
2. Style Guide
3. Integration Methods
4. Customization
5. Accessibility
6. Performance
7. Troubleshooting

1. Getting Started

Unpack the Archive

After purchase, extract the ZIP file:

icons-pro-v1.0.0.zip
├── icons/                  → 75 SVG icon files
├── images/                 → 5 preview plates (PNG)
├── README.md
├── LICENSE.md
├── CHANGELOG.md
├── DOCUMENTATION.md
├── preview.html            → Interactive preview
└── icons-showcase.jsx      → React component

File Naming Convention

Each icon file follows the pattern:

{icon-name}-{style}.svg

Examples:
- shield-line.svg — Shield icon, line style
- database-solid.svg — Database icon, solid style
- brain-duotone.svg — Brain icon, duotone style
- server-glow.svg — Server icon, glow style
- workflow-bold.svg — Workflow icon, bold style

Using the Interactive Preview

Open preview.html in any browser to browse all icons with live style switching, size control, and dark/light theme toggle. Click any icon card to copy its filename to the clipboard.

2. Style Guide

When to Use Each Style

Line (1.5px stroke)

Best for: Clean interfaces, light backgrounds, dense UIs where icons need to be subtle.

Recommended contexts:
- Navigation menus
- Sidebar icons
- Form labels
- Breadcrumbs

Solid (Filled)

Best for: High-contrast needs, dark backgrounds, primary actions, hero sections.

Recommended contexts:
- Call-to-action buttons
- Feature highlights
- Tab bars (active state)
- Empty state illustrations

Duotone (Two-tone depth)

Best for: Modern SaaS applications, dashboards, product marketing pages.

Recommended contexts:
- Feature cards
- Dashboard widgets
- Marketing sections
- Onboarding screens

Bold (2.5px stroke)

Best for: Mobile applications, large format displays, accessibility-focused UIs.

Recommended contexts:
- Mobile navigation
- Large touch targets
- Digital signage
- Presentation slides

Glow (Neon effect)

Best for: Dark mode UIs, tech-focused products, gaming-adjacent applications.

Recommended contexts:
- Dark mode interfaces
- Real-time monitoring dashboards
- Tech product landing pages
- Status indicators (active/live states)

Color Palette

3. Integration Methods

Method 1: Direct SVG in HTML

<!-- Inline SVG (best for customization) -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <!-- paste SVG contents -->
</svg>

<!-- Image tag (simplest) -->
<img src="icons/shield-line.svg" width="24" height="24" alt="Shield icon" />

<!-- CSS background -->
<style>
  .icon-shield {
    width: 24px;
    height: 24px;
    background: url('icons/shield-line.svg') no-repeat center;
    background-size: contain;
  }
</style>

Method 2: React Component

import Icons from './icons-showcase';

function App() {
  return (
    <Icons />
  );
}

For individual icons, extract the SVG paths from the JSX component and create standalone components:

const ShieldIcon = ({ size = 24, style = "line", color = "#0EA5E9" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    {/* SVG paths */}
  </svg>
);

Method 3: CSS Sprite Sheet

.dz-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('icons/sprite.svg');
  background-repeat: no-repeat;
}

.dz-icon--shield { background-position: 0 0; }
.dz-icon--lock   { background-position: -24px 0; }
/* ... etc */

Method 4: Icon Font (DIY)

Use tools like IcoMoon or Fontello to convert the SVGs into a custom icon font:

1. Upload all 75 SVGs to IcoMoon (https://icomoon.io)
2. Select all icons
3. Generate Font
4. Download and integrate the WOFF2 files

4. Customization

Changing Colors

All icons use currentColor-compatible strokes. Override via CSS:

.my-icon svg {
  stroke: #FF6B6B;  /* Change stroke color */
}

.my-icon svg [fill]:not([fill="none"]) {
  fill: #FF6B6B;    /* Change fill color */
}

Changing Size

Icons are designed on a 24×24 grid but scale to any size:

/* Small (16px) */
.icon-sm svg { width: 16px; height: 16px; }

/* Medium (24px) — default */
.icon-md svg { width: 24px; height: 24px; }

/* Large (32px) */
.icon-lg svg { width: 32px; height: 32px; }

/* XL (48px) */
.icon-xl svg { width: 48px; height: 48px; }

Adding Animation

/* Spin animation for refresh or sync icons */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-spinning svg {
  animation: spin 1.5s linear infinite;
}

/* Pulse animation for alert or signal icons */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.icon-pulse svg {
  animation: pulse 2s ease-in-out infinite;
}

5. Accessibility

ARIA Labels

Always provide accessible labels:

<!-- Decorative (hidden from screen readers) -->
<img src="shield-line.svg" alt="" aria-hidden="true" />

<!-- Meaningful (announced by screen readers) -->
<img src="shield-line.svg" alt="Security shield" role="img" />

<!-- Interactive -->
<button aria-label="Enable security">
  <img src="shield-line.svg" alt="" aria-hidden="true" />
</button>

Contrast

• Line and Bold styles meet WCAG AA contrast on backgrounds darker than #374151 or lighter than #E5E7EB
• Solid style meets WCAG AA on backgrounds darker than #1E293B
• Glow style is designed for dark backgrounds only

6. Performance

Optimization Tips

1. Inline critical icons — For above-the-fold icons, inline the SVG to avoid network requests
2. Lazy-load below-fold icons — Use loading="lazy" for image-based implementations
3. Use a sprite sheet — Combine frequently used icons into a single SVG sprite
4. Gzip SVGs — SVG files compress extremely well (60–80% reduction)

File Sizes

7. Troubleshooting

Icons appear blurry

Ensure SVGs are rendered at whole-pixel dimensions (24, 32, 48) to avoid sub-pixel rendering.

Colors not changing

Check that your CSS specificity overrides the inline stroke and fill attributes. Use !important as a last resort or remove inline color attributes from the SVG files.

Icons too small/large in React

The React component uses a size prop. Pass the desired pixel value:

<Icon style="line" size={32}>{icons.Shield}</Icon>

Glow effect not visible

The glow effect uses CSS filter: drop-shadow(). Ensure your container does not have overflow: hidden which can clip the glow.

Need Help?

• Support: https://djangozen.com
• Marketplace: DjangoZen Store
• Updates: Follow us for new icon releases and category expansions

© 2026 DjangoZen. All rights reserved.