Free UI SVG Icons

UI icons are the building blocks of every web and mobile interface. This collection spans outline, filled, animated, duotone, and flat styles so you can match any design system without mixing libraries. Packs like Lucide and Iconoir provide clean line icons, Heroicons offers both outline and solid variants, and Solar includes duotone options. Whether you need lightweight stroke icons for a minimalist dashboard or filled icons for a high-contrast mobile app, you will find an open-source pack here that fits.

16 icon packs·51,841 total icons·Free & open source

Popular UI SVG Icons

A sample from this collection's icon packs. Click any icon to preview, copy, or download it.

Icon Packs

Lucide

1,856 iconsISC

Tabler Icons

6,220 iconsMIT

HeroIcons

1,288 iconsMIT

Solar

8,706 iconsCC-BY-4.0

Remix Icon

3,188 iconsApache-2.0

Phosphor

9,072 iconsMIT

Carbon

2,631 iconsApache-2.0

IonIcons

1,357 iconsMIT

Bootstrap Icons

2,078 iconsMIT

css.gg

704 iconsMIT

MingCute Icon

3,320 iconsApache-2.0

Iconoir

1,671 iconsMIT

Reicon

6,590 iconsMIT

Griddy Icons

2,010 iconsMIT

@icons

642 iconsMIT

Vadivam

508 iconsMIT

Common Use Cases

1Navigation menus and sidebars

2Action buttons and toolbars

3Form inputs, checkboxes, and toggles

4Status indicators and badges

5Empty states and onboarding illustrations

6Tab bars and bottom navigation

7Settings and preference panels

Frequently Asked Questions

Which UI icon pack should I choose?

Lucide is modern and lightweight with consistent 24px line icons. Heroicons integrates seamlessly with Tailwind CSS and ships outline plus solid variants. Tabler offers the largest icon count. Carbon is ideal for enterprise apps. Choose based on your design system and style preference.

What is the difference between outline and filled SVG icons?

Outline (or line/stroke) icons use open paths with a consistent stroke width, giving a lightweight, modern look suited for minimalist interfaces. Filled (or solid) icons use closed shapes with a solid fill, providing higher contrast and better visibility at small sizes. Most packs in this collection, including Heroicons, Remix Icons, and Bootstrap Icons, offer both styles.

Are there animated SVG icons in this collection?

Yes. The dedicated Animated collection includes loading spinners, pulse effects, and motion icons from packs like SVG Spinners. Several UI packs such as Lucide and Tabler also support CSS and JS animation because their clean SVG structure makes keyframe and transition animations straightforward to add.

Are duotone UI icons available?

Yes. Solar Icons and Phosphor Icons in this collection include native duotone variants: icons that use two tones of a single colour for added depth. Duotone icons work especially well in dashboards and feature lists where you want visual hierarchy without introducing a second accent colour.

Can I use these SVG icons commercially for free?

Every pack in this collection is released under an open-source licence (MIT, Apache 2.0, or ISC). You can use them in personal and commercial projects (websites, SaaS products, mobile apps) without attribution in most cases, though checking each pack licence page is recommended.