Iconify for Figma
With Figma plugin you can:
- Import icons. You can also drag and drop icons from plugin to Figma.
- Quickly replace selected icon.
- See code for imported icons for developers.
- Import custom SVG by pasting code. It also decodes "data:" URI.
It is completely free! Unlike other plugins that offer many icons, but require payment to use SVG, Iconify always imports icons as SVG. Iconify project is open source and offers only open source icon sets.
Plugin remembers last page you have visited, making it easy to continue searching or browsing icons. You can always reset plugin from options page.
For visitors that have small monitors, plugin offers compact mode. Click menu (3 lines) link, enable compact width option.
Installation
You can install Iconify for Figma from Iconify plugin page.
Usage
In Figma menu select "Plugins", then select "Iconify".
Browse or search icons, select any icon, click "Import Icon" button or drag icon to Figma document.
After opening plugin you will see main page:
Click any icon set or search icons. For example, search for "arrow left":
Buttons above search results show icon sets, in which matching icons are available. By clicking any icon set button, plugin will show only results from that icon set.
You can drag and drop icon directly from search results:
or you can select icon and scroll to footer, where you will see more options:
When importing from footer you can:
- Set icon color (not available for icons with hardcoded palette).
- Change icon dimensions.
- Transform or rotate icon.
- Import icon as component.
- Get code for icon for developers.
- Replace previously imported icon (avialable only if previously icon's layer is selected in Figma).
By default, those options are not available for icons imported via drag and drop. You can change that behavior in plugin options (button on the left of "Import" in plugin menu).
Footer options
In footer you can get code for selected icon:
For icons that do not have hardcoded palette, color picker is available, showing recently used colors and document colors:
Compact mode
If you have limited window space available, you can make plugin smaller.
Click compact window button in top right corner and plugin window will become much smaller:
You can also minimize plugin window by clicking button in top right corner. In minimized window you can restore plugin or close it:
When importing an icon, you have option to automatically compact or minimize plugin window, making it easier to work on imported icon without closing plugin:
Recent icons
Plugin remembers recently imported icons. If you have replaced an icon, but decided to go back to old one, you can find previous icon in recent icons list:
Recent icons are not specific to current document, so you can see icons recently imported in other documents you have edited.
Options
Plugin has options:
Options are stored in Figma application (or current browser if you are using Figma in browser), so you need to configure plugin only once.
Support
If you have any questions, support for plugin is available at Iconify for Figma GitHub repository.