Migrating from Icon Font to SVG Sprite

Migrating from Icon Font to SVG Sprite

Many projects started with icon fonts and now want to migrate to SVG sprites for better rendering, accessibility, and control. Here is a practical migration guide.

Step 1: Inventory Your Icons

Identify every icon used in your project:

# Find Font Awesome usage
grep -r "fa-[a-z]" src/ --include="*.tsx" --include="*.html" -oh | sort -u

# Find Material Icons usage
grep -r "material-icons" src/ --include="*.tsx" -oh | sort -u

Create a spreadsheet mapping old icon names to new names:

Icon Font Class	SVG Name	Used In
fa-home	icon-home	Header, Sidebar
fa-search	icon-search	SearchBar
fa-times	icon-close	Modal, Dialog

Step 2: Obtain SVG Files

Option A: Export from icon font

Most icon font libraries provide SVG downloads:

• Font Awesome: Available in the npm package under svgs/ directory
• Material Icons: Download from fonts.google.com/icons as SVG
• Custom fonts: Use FontForge or IcoMoon to extract individual glyphs as SVG

Option B: Find equivalent open-source SVGs

Switch to a pure-SVG library:

• Lucide Icons (recommended — clean, consistent, MIT licensed)
• Heroicons (Tailwind CSS team)
• Phosphor Icons

Step 3: Build the Sprite

Use the SVG Sprite Generator to combine your SVGs:

1. Upload or paste all SVG files
2. Enable "Remove fill/stroke" for CSS coloring
3. Set viewBox to match your icon grid (usually 0 0 24 24)
4. Rename icons to your convention
5. Download the sprite file

Step 4: Update Markup

Replace icon font markup with SVG use references:

<!-- Before (icon font) -->
<i class="fa fa-home" aria-hidden="true"></i>
<span class="sr-only">Home</span>

<!-- After (SVG sprite) -->
<svg width="20" height="20" aria-hidden="true">
  <use href="#icon-home"/>
</svg>

For React/Vue, create a component to make this easy:

// Before
<i className="fa fa-home" aria-hidden="true" />

// After
<Icon name="home" size={20} />

Step 5: Update CSS

Replace icon font sizing with SVG sizing:

/* Before (icon font) */
.icon { font-size: 20px; color: #333; }

/* After (SVG) */
.icon { width: 20px; height: 20px; fill: currentColor; color: #333; }

Step 6: Remove Font Assets

After verifying all icons render correctly:

1. Remove the icon font CSS file
2. Remove the font files (.woff, .woff2, .ttf)
3. Remove any icon font npm packages
4. Remove unused CSS classes

Step 7: Test

• Visual regression testing (compare screenshots)
• Accessibility audit (screen reader testing)
• Performance comparison (Lighthouse before/after)
• Cross-browser testing (especially Safari, Firefox)
• Dark mode and high contrast mode

Incremental Migration

For large projects, migrate incrementally:

1. Add the SVG sprite alongside the existing icon font
2. Migrate one section at a time (header, sidebar, forms)
3. Track migration progress with the icon inventory
4. Remove the icon font only when 100% migrated