UI icons docs: setup, formats and keys

Start here

npmReact, Vue, Svelte, Solid, Preact, Angular, React Native and web components.Pro npmEvery Pro style from npm. Set up your licence key first.SwiftSwiftUI, UIKit and AppKit, through Swift Package Manager.FlutterIcon widgets for Flutter apps, from pub.dev.AndroidJetpack Compose icons, from Maven Central.VS CodeSearch the library and insert icons without leaving the editor.Open VSXThe same extension for Cursor, VSCodium and other Open VSX editors.FigmaPlace icons in your designs, in any style, size and colour.IconifyThe free Stroke icons as the iconoven set, for React, Vue, Svelte, Tailwind CSS and every Iconify tool.SVG and other formatsRaw SVG, PNG and PDF, and how to keep the stroke looking right.Request an iconAsk for an icon or a platform we don't cover yet.

Quick start

No install needed: copy any icon straight from the library. For a package, pick your platform above.

Pick an icon
Browse or search the library, then set the size, stroke and colour.
Copy it
Copy as SVG or JSX, download a PNG, or get the SF Symbol or SwiftUI code.
Paste it in
Inline the SVG and it takes the text colour around it, through currentColor.

index.html

<button class="search-button" type="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7.25" stroke-width="1.5"/><path d="M7.75 11a3.25 3.25 0 0 1 3.25-3.25" stroke-width="1.5"/><path d="M16.5 16.5 21 21" stroke-width="1.5"/></svg>
  Search
</button>

CSS

.search-button svg { width: 20px; height: 20px; }

More on files and strokes in SVG and other formats.

What's in the library

85,000+ interface icons in version 1.0.0, every one free in Stroke, across 57 categories. New icons are added in regular drops, listed in the changelog.

The grid

Every icon is drawn on a 24 px square with 2 px of space on each side, a 1.5 px stroke, and round caps and joins. Because they share one grid, any two icons sit well side by side at any size.

Use them at 16, 20, 24 or 32 px. They also scale up for empty states and onboarding.
The stroke scales with the icon. At 16 px, try a stroke of 1.75 or 2 so it doesn't look faint; at 32 px and above, 1.25 keeps it light.
Icons use currentColor, so they take the colour of the text around them.

Canvas: 24 px
Padding: 2 px
Stroke: 1.5 px
Caps and joins: Round

Free and Pro

Free

Every icon in Stroke, MIT licensed: use them anywhere, commercial work included.

Pro

Adds the other 12 styles, every future icon and every format, billed yearly. Max adds the Figma source and icons on request.

See Pro and the licence.

What you can use today

Where	What you get
npm	React, Vue, Svelte, Solid, Preact, Angular, React Native and web components.
Pro npm	Every Pro style from npm. Set up your licence key first.
Swift	SwiftUI, UIKit and AppKit, through Swift Package Manager.
Flutter	Icon widgets for Flutter apps, from pub.dev.
Android	Jetpack Compose icons, from Maven Central.
VS Code	Search the library and insert icons without leaving the editor.
Open VSX	The same extension for Cursor, VSCodium and other Open VSX editors.
Figma	Place icons in your designs, in any style, size and colour.
Iconify	The free Stroke icons as the iconoven set, for React, Vue, Svelte, Tailwind CSS and every Iconify tool.
The library	Copy as SVG or JSX, download a PNG or SF Symbol, or copy the SwiftUI code.
Motion	Animated SVG, CSS, Lottie or SwiftUI.

Working on another platform? Tell us what you need.

Using IconOven UI icons