SVG Icon Packs | Commercial-Friendly Free Vector Icon Libraries

Compare SVG icon libraries for design systems, landing pages, and app UI work, then jump straight to the official source you need.

Recommended SVG Icon Libraries

These links point to official sources. Before shipping, it is still best to review each project’s license details and trademark policy directly.

Lucide

A clean stroke-first set that fits modern product UI and code-friendly workflows.

License: ISC

Formats: SVG, React, Vue, Svelte

Best for: Product UI, dashboards, dev handoff

Tabler Icons

A broad and scalable icon set that works well in admin panels and SaaS products.

License: MIT

Formats: SVG, Figma, React, Webfont

Best for: Back offices, SaaS, broad systems

Iconoir

Lightweight line icons with a strong visual character for brand and creative interfaces.

License: MIT

Formats: SVG, React, React Native, Figma

Best for: Brand UI, creative tools, lighter visuals

Heroicons

A tidy system icon set from the Tailwind ecosystem with clear outline and solid styles.

License: MIT

Formats: SVG, React, Vue

Best for: Web apps, landing pages, Tailwind UI

Remix Icon

Offers both line and filled styles, making it flexible for mobile and general product surfaces.

License: Apache-2.0

Formats: SVG, Icon Font, React, Vue

Best for: Mobile UI, internal tools, general apps

Before you adopt one

  • Review the full license and trademark policy in the official documentation before shipping.
  • Choose early whether your team will use inline SVG, component packages, or Figma plugins.
  • Mixing stroke and filled sets often weakens visual consistency, so a single family is usually safer.

Selection criteria

  • For design systems, package support and release cadence matter more than raw icon count.
  • For marketing pages, tone and consistency usually matter more than coverage.
  • If design and code should share one source, check plugin and package availability first.

How to use

Choose a library

Choose the library that fits your icon style and implementation environment.

Browse the official source

Open the official source and search or browse icons by category.

Check the license before use

Review license details before using SVG files or component packages in production.

Real-world scenarios

Useful when you need a consistent icon voice across product UI, dashboards, landing pages, and onboarding flows.

Keep a landing page visually consistent by choosing one icon voice across every section.

Compare package support and licensing while shaping a design system.

Use the same icon source in Figma and frontend code to simplify handoff.

Recommended tools

Recommended tools that help you finish the workflow faster.

View all

Grid Generator

Visually design custom CSS Grid and Flexbox layout code.

Shadow Generator

Generate multi-layer box-shadow values for soft depth and elevation.

Color Picker

Pick a color and instantly convert HEX, RGB, and HSL values.