UI icons docs | IconOven

Start here

ReactComing laterInstall the packages and use the Icon component: size, stroke, colour and accessibility.SwiftAdd the Swift package and use icons like SF Symbols in SwiftUI and UIKit.FigmaComing laterInstall the plugin, place icons and unlock Pro with your key.SVG and other formatsRaw SVG, PNG, PDF and Iconify, and how to keep the stroke looking right.Pro setup and licence keyYour key today, and later: point npm, pnpm, Yarn or Bun at the Pro registry, add your key to CI, and roll a key.TroubleshootingFixes for 401 and 404 errors, pnpm and Yarn setups, and Xcode package caches.Request an iconAsk for an icon or a platform we don't cover yet.

Quick start

Today every icon comes straight from the library, no package needed.

1Pick an icon
Browse or search the library, then set the size, stroke and colour.
2Copy it
Copy as SVG or JSX, download a PNG, or get the SF Symbol or SwiftUI code.
3Paste 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="10.75" cy="10.75" r="6.25"/><path d="M15.5 15.5 20 20"/></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

7041 interface icons in version 0.1.0: 2658 free and 4383 in Pro, across 72 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

2658 icons, MIT licensed: use them anywhere, commercial work included.

Pro

Adds the rest of the library, every future icon and every format, for one payment.

See Pro and the licence.

What you can use today

You're building	Use
A website or a React app	Copy as SVG or JSX, or download a PNG, from the library
An app for Apple platforms	Add the Swift package, or download the SF Symbol or copy the SwiftUI code
Motion	Animated SVG, CSS, Lottie or SwiftUI

npm packages and a Figma plugin are coming later.

Using IconOven UI icons