Back to blog
February 20, 20265 min read

Free SVG Icons: Where to Find and How to Use Them

The best sources for free SVG icons in 2026, how to use them in your web projects, and tips for customising them to match your brand.

SVG icons are essential for modern web design. They look crisp on any screen, scale to any size, and can be styled with CSS. But where do you find high-quality free SVG icons — and how do you use them effectively?

This guide covers the best sources, usage techniques, and customisation tips.

The Best Free SVG Icon Libraries

1. Heroicons

Created by the makers of Tailwind CSS, Heroicons offers 292 hand-crafted SVG icons in outline and solid styles. They're designed specifically for web UIs and work perfectly with Tailwind.

Licence: MIT
Count: 292 icons
Styles: Outline, Solid, Mini

2. Lucide

A fork of Feather Icons with an active community, Lucide provides 1,000+ consistently styled icons.

Licence: ISC
Count: 1,400+
Use in React:

npm install lucide-react

import { Heart, Search, User } from 'lucide-react';
export function MyComponent() {
  return <Heart size={24} color="#6366f1" />;
}

3. Phosphor Icons

A flexible icon family with 1,200+ icons across six different weights.

Licence: MIT
Count: 1,200+
Styles: Thin, Light, Regular, Bold, Fill, Duotone

4. Tabler Icons

6,000+ SVG icons with consistent 24×24 grid design.

Licence: MIT
Count: 6,000+

5. AnySVG Library

Our free SVG library contains curated icons, shapes, arrows, and illustrations across 8 categories. Browse, search, and download in one click.

Licence: MIT / CC0
Categories: Arrows, Icons, Shapes, Animals, Technology, Business, Social, Weather

How to Use SVG Icons in Your Project

Method 1: Inline SVG (Recommended)

For maximum control and no HTTP request:

<button class="btn">
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="20" 
    height="20" 
    viewBox="0 0 24 24" 
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    aria-hidden="true"
  >
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  </svg>
  Send Message
</button>

The key stroke="currentColor" makes the icon inherit the CSS color of its parent — so you can control the icon colour with color: #6366f1 in your CSS.

Method 2: <img> Tag

Simple and cacheable:

<img src="/icons/arrow-right.svg" alt="Arrow right" width="20" height="20">

Limitation: You cannot change fill colour with CSS.

Method 3: CSS Mask

Allows colour control with CSS for icons used as backgrounds:

.icon-heart {
  width: 20px;
  height: 20px;
  background-color: #ef4444; /* icon colour */
  mask: url('/icons/heart.svg') no-repeat center;
  -webkit-mask: url('/icons/heart.svg') no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

Method 4: SVG Sprite

For projects with many icons, an SVG sprite reduces HTTP requests:

<!-- sprite.svg (hidden) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-heart" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

<!-- Usage -->
<svg width="24" height="24" aria-hidden="true">
  <use href="#icon-heart"/>
</svg>

Customising SVG Icons

Changing Colour

/* If using currentColor */
.icon { color: #6366f1; }

/* If using inline SVG, target the path */
.my-icon path { fill: #6366f1; }

Resizing

Always resize SVG icons via width and height attributes or CSS — never by changing the viewBox:

<!-- Correct -->
<svg width="32" height="32" viewBox="0 0 24 24">...</svg>

<!-- Wrong — distorts the icon -->
<svg viewBox="0 0 32 32">...</svg>

Adding Hover Effects

.icon {
  color: #737373;
  transition: color 0.15s ease;
}
.icon:hover {
  color: #6366f1;
}

Animating Icons

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

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

Optimising Icon SVGs

Before adding icon SVGs to your project, run them through an optimiser. Icon SVGs from packages are usually already optimised, but if you're exporting from Figma or Illustrator, they may contain bloat.

Use our free SVG Optimiser — paste the code, click Optimise, done.

Creating Custom Icons

If you can't find the icon you need, you have several options:

  1. Edit an existing icon in our SVG Editor — modify paths, change shapes
  2. Use a design tool — Figma is free for individuals and has excellent SVG export
  3. Write SVG by hand — for simple geometric icons, this is often the fastest approach
<!-- A simple custom checkmark icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="20 6 9 17 4 12"/>
</svg>

Accessibility Checklist

When using SVG icons:

  • ✅ Add aria-hidden="true" to decorative icons
  • ✅ Add aria-label or visually hidden text for interactive icons
  • ✅ Ensure sufficient colour contrast (minimum 3:1 for UI components)
  • ✅ Don't rely on colour alone to convey meaning
<!-- Accessible icon button -->
<button aria-label="Add to favourites">
  <svg aria-hidden="true" focusable="false" ...>
    <path d="..."/>
  </svg>
</button>

Summary

Free SVG icons are everywhere — the key is knowing where to look and how to use them efficiently:

  1. Browse our AnySVG Library for curated, ready-to-use icons
  2. Use inline SVG for maximum CSS control
  3. Always include aria-hidden="true" on decorative icons
  4. Optimise your SVGs before shipping with the AnySVG Optimiser
  5. Use currentColor so icons inherit your CSS colour

Good icons make interfaces clearer and more professional. The right SVG approach makes them fast and accessible too.