Top 12 Open-Source SVG Icon Libraries for Commercial Use in 2025

Finding high-quality, free SVG icons for commercial projects can be challenging. In this comprehensive guide, we'll explore the best open-source SVG icon libraries and websites that offer free icons with permissive licenses for both personal and commercial use.

What Makes a Great Icon Library?#

Before diving into specific libraries, let's establish criteria for evaluation:

Essential Features#

✅ Free for commercial use - Permissive license (MIT, Apache, CC0)
✅ SVG format - Scalable, editable, optimized
✅ Consistent style - Cohesive visual language
✅ Regular updates - Active maintenance and new icons
✅ Multiple sizes/variants - Outline, solid, different weights

Nice-to-Have Features#

🎨 Framework integration (React, Vue, Svelte components)
📦 Package manager support (npm, yarn, pnpm)
🔍 Search functionality
🎨 Figma/Sketch files
📝 Icon font option
🌐 CDN availability

Top 12 Open-Source Icon Libraries#

1. Heroicons#

Created by: Tailwind Labs (makers of Tailwind CSS)
Total icons: 450+
Styles: Outline (24×24), Solid (20×20), Mini (16×16)
License: MIT
Website: https://heroicons.com

Why Choose Heroicons?

Heroicons offers beautifully crafted icons designed specifically for modern web applications. Each icon comes in three variants optimized for different use cases.

Example Icons:

<!-- Home Icon - Outline -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
 
<!-- Home Icon - Solid -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" />
</svg>

Installation:

npm install @heroicons/react

React Usage:

import { HomeIcon } from '@heroicons/react/24/outline'
import { HomeIcon as HomeIconSolid } from '@heroicons/react/24/solid'
 
function MyComponent() {
  return (
    <div>
      <HomeIcon className="w-6 h-6 text-blue-500" />
      <HomeIconSolid className="w-5 h-5 text-blue-500" />
    </div>
  )
}

Best for: Tailwind CSS projects, modern web apps, consistent design systems

2. Lucide Icons#

Total icons: 1,560+
Styles: Single outline style with consistent stroke width
License: ISC (permissive)
Website: https://lucide.dev

Why Choose Lucide?

Lucide is a community-driven fork of Feather Icons with significantly more icons and active development. It's clean, lightweight, and highly customizable.

Example Icon:

<!-- Heart Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
</svg>

Installation:

npm install lucide-react
# or
npm install lucide-vue-next
npm install lucide-svelte

React Usage:

import { Heart, Star, ShoppingCart } from 'lucide-react';
 
function MyComponent() {
  return (
    <div>
      <Heart size={24} color="red" />
      <Star size={24} fill="gold" />
      <ShoppingCart size={24} strokeWidth={1.5} />
    </div>
  )
}

Best for: Clean, minimal designs, framework-agnostic projects, extensive icon needs

3. Bootstrap Icons#

Created by: Bootstrap team
Total icons: 2,000+
Styles: Single outline/fill style
License: MIT
Website: https://icons.getbootstrap.com

Why Choose Bootstrap Icons?

Bootstrap Icons is a massive, high-quality icon library that works great with or without Bootstrap. It covers almost every use case imaginable.

Example Icons:

<!-- GitHub Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>

Installation:

npm install bootstrap-icons

Usage:

<!-- Icon Font -->
<i class="bi bi-heart-fill"></i>
 
<!-- Inline SVG -->
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

Best for: Bootstrap projects, comprehensive icon needs, icon fonts

4. Iconoir#

Total icons: 1,500+
Styles: Single outline style (rounded, clean)
License: MIT
Website: https://iconoir.com

Why Choose Iconoir?

Iconoir features a unique rounded style with smooth curves. It's available in SVG, Font, React, React Native, Flutter, Figma, and Framer.

Example Icon:

<!-- Camera Icon -->
<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M2 19V9C2 7.89543 2.89543 7 4 7H6.5M22 19V9C22 7.89543 21.1046 7 20 7H17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M6.5 7V5.5C6.5 4.67157 7.17157 4 8 4H16C16.8284 4 17.5 4.67157 17.5 5.5V7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M12 17C14.2091 17 16 15.2091 16 13C16 10.7909 14.2091 9 12 9C9.79086 9 8 10.7909 8 13C8 15.2091 9.79086 17 12 17Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Installation:

npm install iconoir-react

React Usage:

import { Camera, Wifi, Download } from 'iconoir-react'
 
function MyComponent() {
  return <Camera color="currentColor" height={48} width={48} />
}

Best for: Modern, rounded designs, React Native apps, multi-platform projects

5. Tabler Icons#

Total icons: 5,200+
Styles: Outline with customizable stroke width
License: MIT
Website: https://tabler.io/icons

Why Choose Tabler Icons?

One of the largest open-source icon sets with over 5,200 icons. Fully customizable stroke width makes them incredibly versatile.

Example Icon:

<!-- Rocket Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3" />
  <path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3" />
  <circle cx="15" cy="9" r="1" />
</svg>

Installation:

npm install @tabler/icons-react

React Usage:

import { IconRocket } from '@tabler/icons-react';
 
function MyComponent() {
  return <IconRocket size={24} stroke={1.5} color="blue" />
}

Best for: Large-scale applications, dashboards, admin panels

6. Feather Icons#

Total icons: 287
Styles: Single outline style (minimal, consistent)
License: MIT
Website: https://feathericons.com

Why Choose Feather Icons?

Simply beautiful, minimal open-source icons. Perfect for projects that need a small, focused set of carefully crafted icons.

Example Icon:

<!-- Mail Icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
  <polyline points="22,6 12,13 2,6"></polyline>
</svg>

Installation:

npm install feather-icons

Usage:

// Vanilla JS
import feather from 'feather-icons'
feather.replace()

<!-- HTML -->
<i data-feather="mail"></i>

Best for: Minimalist designs, small projects, landing pages

7. Phosphor Icons#

Total icons: 9,072 icons (1,512 unique × 6 weights)
Styles: 6 weights (Thin, Light, Regular, Bold, Fill, Duotone)
License: MIT
Website: https://phosphoricons.com

Why Choose Phosphor Icons?

Massive icon library with 6 different weights, giving you unparalleled flexibility for different contexts and emphasis levels.

Example Icon (same icon, different weights):

<!-- Bell - Thin (weight: 1) -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
  <path d="M220.07,176.94C214.41,167.2,206,139.73,206,104a78,78,0,1,0-156,0c0,35.74-8.42,63.2-14.08,72.94A14,14,0,0,0,48,198H90.48a38,38,0,0,0,75,0H208a14,14,0,0,0,12.06-21.06ZM128,218a26,26,0,0,1-25.29-20h50.58A26,26,0,0,1,128,218Zm81.71-33a1.9,1.9,0,0,1-1.7,1H48a1.9,1.9,0,0,1-1.7-1,2,2,0,0,1,0-2C53.87,170,62,139.69,62,104a66,66,0,1,1,132,0c0,35.68,8.14,65.95,15.71,79A2,2,0,0,1,209.71,185Z"/>
</svg>
 
<!-- Bell - Bold (weight: 3) -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
  <path d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"/>
</svg>

Installation:

npm install @phosphor-icons/react

React Usage:

import { Bell, BellSimple } from "@phosphor-icons/react";
 
<Bell size={32} weight="thin" />
<Bell size={32} weight="bold" />
<Bell size={32} weight="fill" />
<Bell size={32} weight="duotone" />

Best for: Projects needing visual hierarchy, expressive interfaces, multiple emphasis levels

8. Font Awesome (Free)#

Total icons: 2,000+ (free tier)
Styles: Solid, Regular, Brands
License: CC BY 4.0 (icons), MIT (code)
Website: https://fontawesome.com

Why Choose Font Awesome?

The most recognized icon library on the web. Massive ecosystem, excellent documentation, and comprehensive brand icons.

Example Icons:

<!-- Icon Font -->
<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-github"></i>
 
<!-- SVG with JS -->
<i class="fa-solid fa-house" data-fa-transform="grow-6"></i>

Installation:

npm install @fortawesome/fontawesome-free
# or React
npm install @fortawesome/react-fontawesome

React Usage:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse } from '@fortawesome/free-solid-svg-icons'
 
<FontAwesomeIcon icon={faHouse} size="2x" color="blue" />

Best for: Brand icons, established ecosystem, icon fonts, legacy projects

9. Material Symbols (Google)#

Total icons: 3,000+
Styles: Outlined, Rounded, Sharp
License: Apache 2.0
Website: https://fonts.google.com/icons

Why Choose Material Symbols?

Official Google Material Design icons. Variable font technology allows adjusting weight, grade, and optical size.

Example Usage:

<!-- Icon Font (Variable Font) -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
 
<span class="material-symbols-outlined">
  home
</span>
 
<style>
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}
</style>

React Usage (via react-google-material-icons):

import { Home } from 'react-google-material-icons'
 
<Home size={24} variant="outlined" />

Best for: Material Design projects, Android apps, Google ecosystem

10. Ionicons#

Total icons: 1,300+
Styles: Outline, Solid, Sharp
License: MIT
Website: https://ionic.io/ionicons

Why Choose Ionicons?

Premium-designed icons for web, iOS, Android, and desktop apps. Three variants for each icon provide flexibility.

Example Icons:

<!-- Web Component -->
<ion-icon name="heart"></ion-icon>
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart-sharp"></ion-icon>
 
<script type="module">
  import ionicons from 'https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js';
</script>

React Usage:

import { IonIcon } from '@ionic/react';
import { heart, heartOutline } from 'ionicons/icons';
 
<IonIcon icon={heart} size="large" color="danger" />

Best for: Ionic apps, cross-platform mobile apps, iOS/Android design

Icon Discovery Websites#

11. SVG Repo#

Total icons: 500,000+
License: Various open licenses
Website: https://www.svgrepo.com

Features:

✅ Massive collection from multiple sources
✅ Advanced search and filtering
✅ Color customization before download
✅ SVG optimization built-in
✅ License filtering (MIT, CC0, Apache)
✅ Collection browsing

Example Use Case:

1. Search for "rocket"
2. Filter by license: MIT
3. Customize color: #3B82F6
4. Download optimized SVG (auto-compressed)

Best for: Finding specific icons, exploring multiple styles, quick prototyping

12. Hugeicons#

Total icons: 4,000+
Styles: Stroke, Solid, Duotone, Twotone, Bulk
License: Open source (free tier)
Website: https://hugeicons.com

Features:

✅ 5 different styles per icon
✅ React, Vue, Figma integration
✅ Consistent design system
✅ Regular updates

Installation:

npm install hugeicons-react

React Usage:

import { Home01Icon } from "hugeicons-react";
 
<Home01Icon size={24} variant="stroke" />
<Home01Icon size={24} variant="solid" />
<Home01Icon size={24} variant="duotone" />

Best for: Professional projects, design systems, multiple icon variants

Comparison Table#

Library	Icons	Styles	License	React	Vue	Figma	Best For
Heroicons	450+	3	MIT	✅	✅	✅	Tailwind projects
Lucide	1,560+	1	ISC	✅	✅	✅	Clean, minimal
Bootstrap Icons	2,000+	1	MIT	✅	✅	✅	Comprehensive
Iconoir	1,500+	1	MIT	✅	✅	✅	Rounded style
Tabler Icons	5,200+	1	MIT	✅	✅	✅	Dashboards
Feather	287	1	MIT	✅	✅	✅	Minimal
Phosphor	9,072	6	MIT	✅	✅	✅	Visual hierarchy
Font Awesome	2,000+	3	CC BY 4.0	✅	✅	❌	Brand icons
Material Symbols	3,000+	3	Apache 2.0	✅	✅	✅	Material Design
Ionicons	1,300+	3	MIT	✅	✅	✅	Mobile apps
SVG Repo	500,000+	Various	Various	❌	❌	❌	Discovery
Hugeicons	4,000+	5	Open source	✅	✅	✅	Professional

How to Choose the Right Library#

Decision Tree#

1. Are you using Tailwind CSS?

✅ Yes → Heroicons (designed by Tailwind team)
❌ No → Continue to #2

2. Do you need brand logos (GitHub, Twitter, etc.)?

✅ Yes → Font Awesome (2,000+ brand icons)
❌ No → Continue to #3

3. Do you need different icon weights/styles?

✅ Yes, many variants → Phosphor Icons (6 weights)
✅ Yes, multiple styles → Hugeicons (5 styles)
❌ No → Continue to #4

4. How many icons do you need?

🔢 5,000+ → Tabler Icons (5,200+)
🔢 1,000-2,000 → Bootstrap Icons, Lucide, or Iconoir
🔢 < 500 → Heroicons or Feather

5. What's your design style?

🎨 Material Design → Material Symbols
🎨 Rounded, smooth → Iconoir
🎨 Clean, minimal → Lucide or Feather
🎨 Professional, versatile → Tabler Icons

6. Platform requirements?

📱 Mobile (iOS/Android) → Ionicons
📱 React Native → Iconoir
🌐 Web only → Any library works

Best Practices#

1. Use a Single Library#

❌ Avoid:

// Mixing icon libraries
import { HomeIcon } from '@heroicons/react/24/outline'
import { Search } from 'lucide-react'
import { FaGithub } from 'react-icons/fa'

✅ Better:

// Stick to one library for consistency
import { HomeIcon, MagnifyingGlassIcon, CodeBracketIcon } from '@heroicons/react/24/outline'

Exception: Brand icons - use Font Awesome or react-icons for brands when your primary library doesn't have them.

2. Optimize SVG Icons#

Use Tiny SVG or SVGO to compress icons:

# Before
<svg width="24" height="24" ...>
  <metadata>...</metadata>
  <title>Icon</title>
  <path d="M 10.000 10.000 L 20.000 20.000" />
</svg>
# Size: 1.8 KB
 
# After optimization
<svg viewBox="0 0 24 24">
  <path d="M10 10L20 20"/>
</svg>
# Size: 120 bytes (-93%)

3. Use currentColor for Theming#

// ✅ Inherits parent text color
<svg fill="currentColor">
  <path d="..." />
</svg>
 
// Usage
<div className="text-blue-500">
  <HomeIcon /> {/* Will be blue */}
</div>
 
<div className="text-red-500">
  <HomeIcon /> {/* Will be red */}
</div>

4. Size Icons Appropriately#

/* Icon size guidelines */
.icon-sm  { width: 16px; height: 16px; } /* Inline text */
.icon-md  { width: 20px; height: 20px; } /* Buttons */
.icon-lg  { width: 24px; height: 24px; } /* Default UI */
.icon-xl  { width: 32px; height: 32px; } /* Headers */
.icon-2xl { width: 48px; height: 48px; } /* Features */

5. Lazy Load Icon Libraries#

// Dynamic import for code splitting
const IconLibrary = lazy(() => import('./IconLibrary'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <IconLibrary />
    </Suspense>
  );
}

Licensing Summary#

Most Permissive Licenses#

MIT License (Heroicons, Lucide, Tabler, Feather, Iconoir, Phosphor, Ionicons, Bootstrap Icons):

✅ Commercial use
✅ Modification
✅ Distribution
✅ Private use
⚠️ Must include copyright notice

Apache 2.0 (Material Symbols):

✅ Commercial use
✅ Modification
✅ Distribution
✅ Patent grant
⚠️ Must include copyright notice

CC BY 4.0 (Font Awesome icons):

✅ Commercial use
✅ Modification
✅ Distribution
⚠️ Must give appropriate credit

ISC (Lucide):

✅ Very permissive, similar to MIT
✅ Simpler language

Conclusion#

With so many excellent free and open-source SVG icon libraries available in 2025, there's no need to spend money on icons for most projects. Here are our top recommendations:

🏆 Best Overall: Lucide Icons (1,560+ icons, clean design, great React support)

🎨 Best for Design Systems: Phosphor Icons (6 weights for visual hierarchy)

📊 Best for Dashboards: Tabler Icons (5,200+ icons, comprehensive coverage)

⚡ Best for Tailwind: Heroicons (designed by Tailwind team)

🔍 Best for Discovery: SVG Repo (500,000+ icons, all licenses)

💼 Best for Professional Projects: Hugeicons (5 styles, design system ready)

Start with one library that matches your design style and project needs. You can always supplement with additional icons from SVG Repo for specific use cases.

Happy designing!