Best Free SVG Icon Libraries 2026: npm Packages Compared

A fork of Feather that kept growing after Feather slowed down, actively maintained. Every icon follows a strict 24px grid with a 2px stroke, so your UI looks consistent without effort. Packages exist for React, Vue, Svelte, Angular and plain JavaScript.

npm install lucide-react

import { Search, Settings, Bell } from 'lucide-react';

<Search size={20} strokeWidth={1.5} />

SearchSettingsBellLayout DashboardUserFile Text

Use if: you need a general-purpose library for a React or Vue app and want active maintenance with a clean look. On shadcn/ui, see how to add SVG icons to shadcn/ui.

About 300 hand-crafted icons from the Tailwind CSS team, each in outline (24px, 1.5px stroke), solid (24px), mini (20px) and micro (16px). A small set, but each size is drawn separately, so icons stay sharp in buttons and dense lists.

npm install @heroicons/react

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

Magnifying GlassBellUser CircleSquares 2x2Cog 6 ToothArrow Right

Use if: you are building a Tailwind CSS product and want icons designed alongside the framework.

The largest consistent outline set, plus 1,000+ filled versions for active states. A good fit for admin panels, dashboards and products that need deep coverage without mixing styles.

npm install @tabler/icons-react

import { IconSearch, IconBell, IconSettings } from '@tabler/icons-react';

SearchBellSettingsDashboardChart BarUsers

Use if: you are building an admin panel, SaaS dashboard or internal tool that needs hundreds of specific icons. More in the Tabler Icons React guide.

Every icon ships in six weights: thin, light, regular, bold, fill and duotone. It is the only major free library where you can change visual weight the same way across every icon, which suits design tokens and multi-context systems.

npm install @phosphor-icons/react

import { Heart } from '@phosphor-icons/react';

<Heart weight="duotone" size={24} />

HeartStarBellMagnifying GlassUserGear

Use if: your design system has several contexts (light and dark, prominent and subtle states) and needs consistent weight changes. More in the Phosphor Icons React guide.

Google's 2021 replacement for Material Icons. One variable font controls fill, weight, grade and optical size through CSS.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">

.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

SearchNotifications OutlineSettings OutlineHome OutlinePerson OutlineDashboard Outline

Use if: you work in a Material Design ecosystem (Android, Flutter web, Google products) or need the widest coverage in one library. The font loads every icon, so use SVG files when bundle size matters.

Drawn on a 16px grid, so they stay crisp at small sizes like labels, badges and table actions. You do not need Bootstrap CSS to use them.

npm install bootstrap-icons

SearchBellGearPerson CircleHouseGrid

Use if: your project uses Bootstrap, or you need icons that look sharp at 14 to 16px.

Line and fill versions of every icon. Covers UI actions, media controls, finance, logos and maps, with a slightly warmer look than Lucide.

npm install @remixicon/react

import { RiSearchLine } from '@remixicon/react';

Search LineNotification LineSettings LineHome LineUser LineBar Chart Line

Use if: you want a Lucide-scale library with more coverage and a filled version of each icon.

IBM's icon set for the Carbon design system. Strong on data, cloud and system concepts, with icons drawn for 16, 20, 24 and 32px.

npm install @carbon/icons-react

import { Search } from '@carbon/icons-react';

<Search size={20} />

SearchNotificationSettingsDashboardUserData Base

Use if: you build dense enterprise or developer tools.

The Ionic framework's icons, in outline, filled and sharp versions with iOS and Material feel. They ship as a web component, so they work in any framework.

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<ion-icon name="search-outline"></ion-icon>

Search OutlineNotifications OutlineSettings OutlineHome OutlinePerson OutlineGrid Outline

Use if: you build a mobile or hybrid app, especially with Ionic.

Brand and technology logos for "tech stack" sections, "sign in with" buttons and portfolios. Each icon includes the official brand hex color.

npm install simple-icons

import { siGithub } from 'simple-icons';

siGithub.svg;
siGithub.hex;

GithubVercelReactTypescriptTailwindcssFigma

Use if: you need brand logos for a portfolio, landing page or "built with" section. Check each brand's own guidelines before using its logo.