SVG Icons

Scalable, stylable, and accessible icons for the web.

Why SVG Icons?

  • Infinitely scalable without quality loss
  • Stylable with CSS (color, size, stroke)
  • Smaller file size than icon fonts
  • Better accessibility
  • No extra HTTP requests when inlined

Basic Icon Structure

<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M5 12h14M12 5l7 7-7 7"/>
</svg>

Using currentColor

Set fill or stroke to currentColor to inherit the parent's text color:

.icon { color: blue; }
<svg fill="currentColor">...</svg>

Icon Sprite Sheets

Combine icons into one file and reference them:

<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-arrow" viewBox="0 0 24 24">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </symbol>
</svg>

<!-- Usage -->
<svg><use href="sprite.svg#icon-arrow"/></svg>

Accessibility

<!-- Decorative icon -->
<svg aria-hidden="true">...</svg>

<!-- Meaningful icon -->
<svg role="img" aria-label="Home">
  <title>Home</title>
  ...
</svg>

Popular Icon Libraries

đź’ˇ

SVG Icons Explained Simply

Think of SVG icons as smart graphics that remember their shape rather than their pixels. When you zoom in on a regular image like a PNG, it gets blurry because it's made of tiny colored squares. SVG icons, on the other hand, are made of mathematical instructions—draw a line here, curve there—which means they look perfectly crisp whether displayed as a tiny 16-pixel button or blown up to fill a billboard.

What makes SVG icons particularly powerful for websites is how easily they adapt to your design. Unlike image files that have their colors baked in, SVG icons can inherit colors from your CSS. This means a single icon file can appear blue on one page and red on another, or automatically switch to white when your site is in dark mode. You save bandwidth by not needing multiple versions of the same icon in different colors.

From an accessibility standpoint, SVG icons are far superior to icon fonts or image-based alternatives. Screen readers can properly interpret them when you add the right attributes, meaning visually impaired users understand what each icon represents. They also render more consistently across different browsers and devices, without the quirky alignment issues that plague icon fonts.

For developers and designers, working with SVG icons means cleaner code and easier maintenance. You can combine dozens of icons into a single sprite file, style them with CSS transitions for smooth hover effects, and even animate them for engaging micro-interactions. Once you start using SVG icons, you'll wonder how you ever managed with anything else.

Frequently Asked Questions

What are SVG icons and why should I use them?
SVG icons are vector-based graphics defined using XML markup. Unlike raster images (PNG, JPG), SVG icons scale to any size without losing quality, making them perfect for responsive web design. They also have smaller file sizes than icon fonts, can be styled with CSS, and offer better accessibility options.
How do I change the color of an SVG icon?
Set the fill or stroke attribute to 'currentColor' in your SVG, then control the color using CSS. For example: svg { color: blue; }. This makes the icon inherit the text color of its parent element, making it easy to style consistently across your site.
What is an SVG sprite sheet?
An SVG sprite sheet is a single SVG file containing multiple icons defined as <symbol> elements. You reference individual icons using the <use> element with their ID. This approach reduces HTTP requests and makes icon management easier while still allowing individual styling.
Are SVG icons better than icon fonts?
Yes, SVG icons offer several advantages over icon fonts: better accessibility (screen readers handle them properly), more precise rendering without anti-aliasing issues, multi-color support, smaller file sizes when using only a few icons, and no flash of invisible text during loading.
How do I make SVG icons accessible?
For decorative icons, add aria-hidden='true' to hide them from screen readers. For meaningful icons, add role='img' and aria-label with a description, or include a <title> element inside the SVG. This ensures users with assistive technologies understand the icon's purpose.
What is the viewBox attribute in SVG icons?
The viewBox attribute defines the coordinate system and aspect ratio of an SVG. It contains four values: min-x, min-y, width, and height. For icons, '0 0 24 24' is common, meaning the icon is designed on a 24x24 grid. This allows the icon to scale proportionally to any size.
Should I inline SVG icons or use external files?
Inline SVGs load faster (no extra HTTP request) and can be styled directly with CSS. External SVG files are better for caching when the same icons appear across multiple pages. For most websites, a sprite sheet approach offers the best balance of performance and maintainability.
What are the best free SVG icon libraries?
Popular free SVG icon libraries include Heroicons (by Tailwind CSS), Lucide (Feather icons fork), Phosphor Icons, Tabler Icons, and Bootstrap Icons. These libraries offer thousands of well-designed, consistent icons that work great for web projects.
How do I optimize SVG icons for performance?
Optimize SVG icons by removing unnecessary metadata and comments, simplifying paths, using SVGO or similar tools, combining multiple icons into sprite sheets, and enabling gzip compression on your server. Well-optimized SVG icons are typically under 1KB each.
Can I animate SVG icons?
Yes, SVG icons can be animated using CSS animations, CSS transitions, or JavaScript libraries like GSAP. You can animate properties like stroke-dasharray for drawing effects, transform for rotation and scaling, or opacity for fade effects. SVG animations are smooth and performant.