Create SVG Icons for Web Apps

Key Takeaways

SVG icons are resolution-independent, eliminating the need for 1x/2x/3x raster variants entirely
Use currentColor in your SVGs so icon color is controlled by CSS color property — one file, infinite color options
Inline SVG gives maximum control; SVG sprites are best for large icon sets with caching benefits
Always add aria-hidden="true" for decorative icons and role="img" with <title> for meaningful ones
Open-source libraries like Heroicons, Lucide, and Tabler Icons provide thousands of production-ready SVG icons

Why SVG Icons for Web Applications?

Modern web applications demand icons that are:

Scalable: Look perfect on any device or screen density
Performant: Fast loading and minimal bandwidth
Flexible: Easy to style and animate
Accessible: Compatible with screen readers

SVG icons check all these boxes and more.

The Problem with Icon Fonts and Raster Images

Icon Fonts Issues

- Loading delays (FOIT - Flash of Invisible Text)
- Anti-aliasing problems
- Limited multi-color support
- Accessibility challenges
- HTTP request overhead
- CSS dependency

Raster Images (PNG) Problems

- Multiple versions for different densities (1x, 2x, 3x)
- Larger file sizes
- No style customization
- Fixed colors
- Multiple HTTP requests

SVG Icons Advantages

- Single file for all sizes
- Inline in HTML (no HTTP request)
- CSS styling
- JavaScript animation
- Perfect on any screen
- Tiny file sizes
- Multi-color support
- Full accessibility

Pro Tip: If you're migrating from an icon font like Font Awesome, don't convert all at once. Start by replacing above-the-fold icons with inline SVGs first — you'll see an immediate improvement in LCP and eliminate FOIT (Flash of Invisible Text) for your most visible icons.

Setting Up SVG Icons in Your Project

Method 1: Inline SVG (Recommended)

Pros: Full control, no HTTP requests, styleable, animatable

html

<svg class="icon icon-check" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

css

.icon {
  width: 24px;
  height: 24px;
  color: #1cb721;
}

.icon-check {
  stroke: currentColor;
}

Method 2: SVG Sprite

Pros: Reusable, cacheable, organized

Create sprite.svg:

xml

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2"/>
  </symbol>

  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

Use in HTML:

html

<svg class="icon">
  <use href="/sprite.svg#icon-check"/>
</svg>

Method 3: IMG Tag

Pros: Simple, cacheable

Cons: No styling, no color change

html

<img src="/icons/check.svg" alt="Check icon" width="24" height="24">

Method 4: CSS Background

Pros: No HTML clutter, cacheable

Cons: Limited flexibility

css

.icon-check {
  width: 24px;
  height: 24px;
  background: url('/icons/check.svg') no-repeat center;
  background-size: contain;
}

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Creating SVG Icons from Scratch

Design Principles

1. Pixel Grid Alignment

Design on 24x24 grid (most common)
Align to whole pixels
Avoid sub-pixel positions

2. Consistent Style

Uniform stroke width (usually 2px)
Consistent corner radius
Similar visual weight

3. Viewbox Convention

Standard: viewBox="0 0 24 24"
Custom: Scale appropriately

Design Tools

Free:

Figma (browser-based)
Inkscape (desktop)
SVG Edit (browser)

Paid:

Adobe Illustrator (subscription)
Sketch (Mac only)
Affinity Designer (free since September 2025, previously $69.99 one-time)

Example: Creating a Check Icon

Figma/Illustrator Process:

Create 24x24 artboard
Draw path with pen tool
Set stroke width to 2px
Round line caps and joins
Export as SVG

Code Result:

xml

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M20 6L9 17L4 12"
    stroke="#000"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Converting Existing Icons to SVG

From PNG/JPEG

Use Vectosolve for high-quality conversion:

javascript

// Batch convert icon set
const icons = ['check', 'close', 'menu', 'search'];

async function convertIcons() {
  for (const icon of icons) {
    const pngPath = `./icons/png/${icon}.png`;
    const svgPath = `./icons/svg/${icon}.svg`;

    // Upload to Vectosolve API
    // Download optimized SVG
  }
}

From Icon Fonts

Tools:

IcoMoon (extract and export)
Fontello (download as SVG)
Manual export from font files

Optimizing SVG Icons

1. Remove Unnecessary Code

Before:

xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>check</title>
  <desc>Created with Sketch.</desc>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none">
    <path d="M20 6L9 17L4 12" stroke="#000000" stroke-width="2"/>
  </g>
</svg>

After:

xml

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2"/>
</svg>

2. Use SVGO

Install:

bash

npm install -g svgo

Optimize:

bash

svgo input.svg -o output.svg

Config (svgo.config.js):

javascript

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: false,
        },
      },
    },
  ],
};

3. Reduce Decimal Precision

xml

<!-- Before -->
<path d="M10.123456 20.789012 L15.456789 25.123456"/>

<!-- After -->
<path d="M10.12 20.79 L15.46 25.12"/>

4. Use currentColor

Before:

xml

<path stroke="#000000"/>

After:

xml

<path stroke="currentColor"/>

Now controllable with CSS:

css

.icon {
  color: #1cb721;
}

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Styling SVG Icons with CSS

Basic Styling

css

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size variants */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }

/* Color variants */
.icon-primary { color: #1cb721; }
.icon-danger { color: #dc3545; }
.icon-warning { color: #ffc107; }

Hover Effects

css

.icon-button {
  color: #666;
  transition: color 0.2s, transform 0.2s;
}

.icon-button:hover {
  color: #1cb721;
  transform: scale(1.1);
}

Animations

css

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-loading {
  animation: spin 1s linear infinite;
}

React Component Pattern

Basic Icon Component

tsx

// components/Icon.tsx
interface IconProps {
  name: string;
  size?: number;
  className?: string;
  color?: string;
}

export function Icon({ name, size = 24, className, color }: IconProps) {
  return (
    <svg
      className={`icon icon-${name} ${className || ''}`}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ color }}
    >
      <use href={`/sprite.svg#icon-${name}`} />
    </svg>
  );
}

// Usage
<Icon name="check" size={24} color="#1cb721" />

With TypeScript

tsx

type IconName = 'check' | 'close' | 'menu' | 'search' | 'user';

interface IconProps {
  name: IconName;
  size?: 16 | 24 | 32;
  className?: string;
}

export function Icon({ name, size = 24, className }: IconProps) {
  return (
    <svg className={`icon ${className}`} width={size} height={size} viewBox="0 0 24 24">
      <use href={`#icon-${name}`} />
    </svg>
  );
}

Dynamic Import

tsx

import { lazy, Suspense } from 'react';

const IconCheck = lazy(() => import('./icons/Check'));

function MyComponent() {
  return (
    <Suspense fallback={<div className="icon-placeholder" />}>
      <IconCheck size={24} />
    </Suspense>
  );
}

Vue Component Pattern

vue

<!-- components/Icon.vue -->
<template>
  <svg
    :class="['icon', `icon-${name}`, className]"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <use :href="`/sprite.svg#icon-${name}`" />
  </svg>
</template>

<script setup lang="ts">
interface Props {
  name: string;
  size?: number;
  className?: string;
}

withDefaults(defineProps<Props>(), {
  size: 24,
  className: '',
});
</script>

<!-- Usage -->
<Icon name="check" :size="24" class-name="text-green-500" />

When building a component library, export your Icon component with tree-shakeable individual icon imports alongside the sprite approach. This lets consumers import only the icons they need, keeping bundle sizes minimal in applications that use just a handful of your icons.

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Performance Optimization

1. Inline Critical Icons

html

<head>
  <style>
    /* Inline sprite for above-the-fold icons */
  </style>
</head>

2. Lazy Load Non-Critical Icons

javascript

// Load icon sprite when needed
async function loadIconSprite() {
  const response = await fetch('/sprite.svg');
  const svg = await response.text();
  document.body.insertAdjacentHTML('afterbegin', svg);
}

// Call on interaction
document.addEventListener('DOMContentLoaded', () => {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(loadIconSprite);
  } else {
    setTimeout(loadIconSprite, 1);
  }
});

3. Bundle Size Optimization

Webpack:

javascript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

Vite:

javascript

// vite.config.js
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [svgr()],
});

4. Compression

Enable Gzip/Brotli:

nginx

# nginx.conf
gzip on;
gzip_types image/svg+xml;

# Or Brotli (better compression)
brotli on;
brotli_types image/svg+xml;

Accessibility Best Practices

Add Proper ARIA Labels

html

<!-- Decorative icon (hidden from screen readers) -->
<svg aria-hidden="true" focusable="false">
  <use href="#icon-check"/>
</svg>

<!-- Interactive icon -->
<button>
  <svg role="img" aria-labelledby="check-title">
    <title id="check-title">Mark as complete</title>
    <use href="#icon-check"/>
  </svg>
</button>

<!-- With description -->
<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">Success</title>
  <desc id="icon-desc">Your action completed successfully</desc>
  <use href="#icon-check"/>
</svg>

Focus Indicators

css

.icon-button:focus {
  outline: 2px solid #1cb721;
  outline-offset: 2px;
}

.icon-button:focus:not(:focus-visible) {
  outline: none;
}

Icon Libraries and Resources

Open Source Icon Sets

Heroicons (heroicons.com)
- Tailwind CSS official icons
- 2 styles: Outline, Solid
- MIT License
Lucide (lucide.dev)
- Fork of Feather Icons
- Consistent 24x24 grid
- Multiple frameworks
Tabler Icons (tabler-icons.io)
- 4,000+ icons
- Customizable stroke
- MIT License
Bootstrap Icons (icons.getbootstrap.com)
- 1,800+ icons
- Designed for Bootstrap
- MIT License

Commercial Options

Nucleo ($99-$149, price listed in November 2025)
Streamline ($39-$99/year, price listed in November 2025)
IconJar (icon management)

Converting with Vectosolve

For custom icons or brand-specific designs:

Design in PNG at high resolution
Upload to Vectosolve
Convert to SVG
Optimize with SVGO
Integrate into project

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Testing Your Icons

Visual Testing

html

<!-- Create icon test page -->
<div style="background: white; padding: 20px;">
  <h3>Light Background</h3>
  <svg class="icon"><use href="#icon-check"/></svg>
</div>

<div style="background: black; padding: 20px;">
  <h3>Dark Background</h3>
  <svg class="icon" style="color: white;"><use href="#icon-check"/></svg>
</div>

<!-- Test different sizes -->
<svg class="icon" width="16"><use href="#icon-check"/></svg>
<svg class="icon" width="24"><use href="#icon-check"/></svg>
<svg class="icon" width="32"><use href="#icon-check"/></svg>
<svg class="icon" width="48"><use href="#icon-check"/></svg>

Automated Testing

javascript

// Jest + React Testing Library
describe('Icon Component', () => {
  it('renders with correct size', () => {
    const { container } = render(<Icon name="check" size={24} />);
    const svg = container.querySelector('svg');
    expect(svg).toHaveAttribute('width', '24');
  });

  it('applies custom className', () => {
    const { container } = render(<Icon name="check" className="custom" />);
    expect(container.firstChild).toHaveClass('custom');
  });
});

Production Checklist

All icons optimized with SVGO
ViewBox consistent across all icons
Using currentColor for dynamic styling
Proper ARIA labels for interactive icons
aria-hidden="true" for decorative icons
Focus indicators for keyboard navigation
Tested on different screen sizes
Tested on light and dark backgrounds
File sizes minimized
Sprite sheet created for common icons
Icons load in build process
Fallbacks for unsupported browsers
Documentation for team

Conclusion

SVG icons are the modern standard for web applications, offering unmatched flexibility, performance, and scalability. By following this guide, you can create, optimize, and implement a professional icon system that enhances your application's user experience while maintaining excellent performance.

Whether you're converting existing icons with Vectosolve or creating new ones from scratch, the investment in a proper SVG icon system will pay dividends in maintainability, performance, and user satisfaction.

Ready to upgrade your icon system? Start by converting your existing icons to SVG with Vectosolve and experience the difference that true vector graphics make.

SVG Icon Method	HTTP Requests	CSS Styling	Caching	Best For
Inline SVG	0	Full (fill, stroke, animations)	No (in HTML)	Interactive icons, animations
SVG sprite (<use>)	1 (sprite file)	Limited (currentColor)	Yes (external file)	Large icon sets, static sites
React SVG component	0 (bundled)	Full (props + CSS)	Bundle cache	React/Next.js apps
Icon font (legacy)	1 (font file)	Color only	Yes	Legacy projects only
External <img> SVG	1 per icon	None	Yes	Simple static display

Try it on your own file

Key Takeaways

Icon Fonts Issues

Raster Images (PNG) Problems

SVG Icons Advantages

Method 1: Inline SVG (Recommended)

Method 2: SVG Sprite

Method 3: IMG Tag

Method 4: CSS Background

Design Principles

Design Tools

Example: Creating a Check Icon

From PNG/JPEG

From Icon Fonts

1. Remove Unnecessary Code

2. Use SVGO

3. Reduce Decimal Precision

4. Use currentColor

Basic Styling

Hover Effects

Animations

Basic Icon Component

With TypeScript

Dynamic Import

1. Inline Critical Icons

2. Lazy Load Non-Critical Icons

3. Bundle Size Optimization

4. Compression

Add Proper ARIA Labels

Focus Indicators

Open Source Icon Sets

Commercial Options

Converting with Vectosolve

Visual Testing

Automated Testing

You might also like:

Try Vectosolve Now

Related articles

VectoSolve Developer Ecosystem: SDK, MCP Server & Open-Source Tools

Related Conversion Tools

AI to SVG Converter

Bitmap to SVG Converter

BMP to SVG Converter

Explore related tools

Tool Comparisons

VectoSolve vs Vectorizer.io

VectoSolve vs Adobe Illustrator

VectoSolve vs Convertio

Ready to vectorize your images?