Skip to main content
Icon & Illustration Design·Lesson 5 of 5

Exporting & Handoff

Designing beautiful icons is only half the job. The other half is delivering them in a format that developers can implement efficiently. Poor export practices lead to bloated files, rendering issues, and frustration during development. This lesson covers the practical steps for getting your icons from design tool to production code.

SVG Export Settings

When exporting icons as SVG from Figma, Illustrator, or Sketch, pay attention to these settings:

  • Flatten and outline all strokes — If your icon uses strokes, consider outlining them before export. This prevents stroke width from changing when the SVG is scaled with CSS. However, if you want developers to be able to adjust stroke width via CSS, keep strokes as strokes and use vector-effect="non-scaling-stroke".
  • Remove hidden layers — Design tools sometimes export invisible elements. Clean up your layers before exporting.
  • Set the viewBox correctly — Ensure your export includes the viewBox attribute matching your grid (e.g., 0 0 24 24).
  • Remove fixed width and height — Let the viewBox handle sizing so the SVG can be scaled freely with CSS.

Post-export optimization: Run every exported SVG through SVGO or SVGOMG to strip metadata, simplify paths, and reduce decimal precision. This can reduce file size by 30-60%.

Icon Fonts vs Inline SVG

There are two main approaches to implementing icons on the web, and inline SVG has become the clear winner in modern development.

Icon fonts bundle icons as glyphs in a font file. They were popular because they allowed easy color and size changes via CSS. However, they have significant downsides:

  • Anti-aliasing varies across browsers and operating systems
  • Accessibility is poor — screen readers may announce random characters
  • Adding or updating a single icon requires regenerating the entire font
  • Flash of invisible text (FOIT) while the font loads

Inline SVG places the SVG markup directly in the HTML or imports it as a component. Advantages include:

  • Pixel-perfect rendering at all sizes
  • Full CSS control over individual paths and colors
  • Better accessibility with aria-label and role="img"
  • Tree-shakeable — only the icons you use are included in the bundle

Practical tip: In React projects, create a component for each icon that accepts size, color, and className props. This is exactly the pattern used in popular libraries like Lucide and Heroicons.

Sprite Sheets

For projects with many icons, SVG sprite sheets offer a middle ground between inline SVG and icon fonts. A sprite sheet is a single SVG file containing all icons as <symbol> elements:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

Individual icons are then referenced with the <use> element:

<svg width="24" height="24"><use href="#icon-home"/></svg>

This approach reduces HTTP requests while keeping the benefits of SVG rendering. The tradeoff is that you lose the ability to tree-shake unused icons.

Organizing for Developers

Clear organization prevents confusion and speeds up implementation:

  • Folder structure — Group icons by category: /icons/navigation/, /icons/actions/, /icons/media/
  • Consistent naming — Use the same kebab-case names you defined in your design system
  • Documentation — Provide a visual reference sheet showing every icon with its name. A simple HTML page or Storybook story works well.
  • Changelog — When you update icons, note what changed so developers know what to update

Handoff checklist for each icon delivery:

  1. SVGs exported and optimized
  2. Naming matches the design system
  3. Visual reference page is updated
  4. Any new categories or changed icons are noted
  5. Both light and dark variants included if applicable

Key Takeaways

  • Always optimize SVGs after exporting from your design tool
  • Prefer inline SVG over icon fonts for modern web projects
  • Use sprite sheets when managing large icon sets with many icons per page
  • Organize and document your icon deliverables to keep developer handoff smooth