Skip to content

UI icons docs

Figma

Search and place icons from a plugin, as editable vectors that match the ones in code.

DocsFigma

Coming later. The Figma plugin isn't out yet, so this page describes how it will work. Until then, copy any icon as SVG from the library and paste it into Figma.

Install the plugin

  1. Open the IconOven plugin page in the Figma Community and choose Open in a file.
  2. From then on, find it under Actions, Plugins, IconOven.

It opens on the free set. Search by name or by what the icon means: "money" finds wallet, coin and bank.

Place icons

  • Click an icon to drop it in the middle of your view, or drag it onto a frame.
  • Set the size and stroke at the top of the plugin before you place. The stroke stays true to the size you pick.
  • Icons come in as a 24 px frame with the stroke as a vector, named after the icon, so the layer names match the code.
  • Select an icon on the canvas and pick another in the plugin to swap it in place.

Unlock Pro

  1. In the plugin, choose Unlock Pro.
  2. Paste your licence key (it starts with iok_).

The plugin remembers it on this computer. On a Team licence, use your own seat key: the CI key doesn't work in Figma. See seat keys.

Prefer a file?

Pro downloads include a Figma file with every icon as a component, ready to publish as a team library.

Your cart

Your cart is empty.

Browse icons