Design
index
title: Iconify for Designers
Iconify for designers
For designers, Iconify ecosystem offers several ways to easily import icons in various design tools.
Available options:
- Figma users can install Iconify plug-in for Figma.
- Penpot users can install Iconify plug-in for Penpot.
- Sketch users can install Iconify plugin-in for Sketch.
- For other design tools, or if you are experiencing issues with plug-ins listed above, you can copy and paste SVG from one of sources listed below.
Browse icons
You can browse and search more than 60k open source icons at one of the following websites:
- Iconify icon sets - official website.
- Icones - alternative website created by Anthony Fu.
Find icon you want, select it, copy SVG to clipboard, paste it to your favorite design tool.
Possible issues:
- Some design tools do not support
[prop]currentColor. Set icon color to black before copying code sample. - Almost all image editing software do not support SVG 2 animations. Animated icons will be imported without animations, sometimes rendered weirdly.
index
title: Iconify for Figma
replacements:
- code: "60,000"
value: "${counters.icons}"
- code: "70+"
value: "${counters.sets}+"
Iconify for Figma
With the Iconify plugin for Figma you can import over 60,000 vector icons to Figma.
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 the last page you have visited, making it easy to continue searching or browsing icons.
For visitors that have small monitors, the plugin offers compact mode. Button to toggle compact mode is in the top right corner of the plugin window.
Installation
You can install Iconify for Figma from Iconify plugin page.
Usage
Browse or search icons, select any icon, click [str]Import Icon button or drag icon to the Figma document.
Detailed instructions
After opening the plugin, you will see the main page:
Click any icon set or search icons.
When you click an icon set, the plugin will show you all icons in that icon set. You can filter icons by categories (if the current icon set has them), search icons.
To show more icons, simply scroll the icons list.
You can also search all icon sets for icons. For example, search for "gear":
The plugin will show you all icons that match your keyword.
When you hover any icon, you will see a button to show more information.
If you hover it, you will see the icon name. If you click it, you will see:
You can import icon by:
- Using quick import buttons from icon tooltip.
- Dragging icon from plugin window to Figma document.
- Clicking icon to select it, importing it using buttons in plugin window footer.
Advanced import
When you select an icon, it will appear in page footer with options:
For icons that do not have a hardcoded palette, color picker is available, showing recently used colors and available color styles:
Compact mode
If you have limited window space available, you can make the plugin window even smaller.
Click the compact window button in the top right corner and the plugin window will become much smaller:
Support and feedback
Feedback is welcome.
See [str]feedback page in the plugin or visit support page on website.
update-2024-attempt2
title: Iconify for Figma update
What's new in Iconify for Figma
Welcome to the new Iconify plugin for Figma.
In 2024, the plugin has been completely rewritten. The new version has nothing in common with the old version, so this is a rather radical change, which requires a tutorial.
This is a second attempt at rewrite. First attempt failed miserably because of bad UX. New version has been redesigned to vastly improve UX.
New UI
The first change you'll notice immediately is the new layout.
Plugin is designed to fit as much content as possible in the smallest possible space.
You can make it even smaller by clicking the button in navigation to toggle compact width.
Due to limited space, the plugin uses tooltips to show additional information.
License information
One of the biggest changes is advanced license information.
Even though all icon sets are open source, not all open source licenses are equal. Some ask for attribution, some prevent commercial use.
The new plugin shows attribution requirement and commercial use limitation in various places:
- In icon sets list in tooltip for each icon set.
- When browsing icon set, it is shown in tooltip for icon set name.
- When browsing icons, it is shown in tooltip for each icon.
Additionally, you can filter icon sets and search results by license (see below).
Advanced filters
There are many icon sets, finding an icon set that you want might be a challenge.
The new version of the plugin has advanced filters to help you find icon sets.
You can filter icon sets by:
- Category
- Palette
- License
- Icon grid
- Tags (coming very soon)
You can also use filter input to filter icon sets by all of the above, plus author name (case insensitive):
Favorite icon sets
You can now mark icon sets as favorite.
This can be done by clicking the star button when viewing an icon set page or icon set tooltip.
When browsing the icon sets list, if you have marked some icon sets as favorite, you will see the new option to browse only favorite icon sets.
All lists (favorite and recent icon sets, recent icons) are considered to be private data (stored in Figma) and can be cleared.
Custom lists
You can also create custom lists of icon sets by clicking a button next to star button shown in screenshots above.
Scrollable icons
Previous versions of the plugin used pagination to show many icons. You needed to click page buttons to show more icons, which was not convenient.
The new version of the plugin has completely redesigned icons view:
- You can now scroll icons.
- Icons list takes all available space, so the bigger plugin window is, the more icons are shown.
- Pagination is also available if you prefer to use pages.
Color styles
When importing icons, you can now pick color styles in color picker.
Due to Figma plugin system limitation, color picker might not show all color styles.
The plugin has access to:
- Color styles defined in the currently viewed document.
- Color styles used in selected layers.
So if you have color styles shared from another document, the plugin might not see them. To add them to color picker, you need to select any layer that uses that color style.
Solid colors only
Note that the plugin supports only color styles that have one solid color.
Gradients, patterns, colors with opacity are not supported.
Replacing icons
If you have selected a layer that contains icon, which was previously imported with plugin, you will see an option to replace that icon (icon with left/right arrows on screenshot below).
Option to replace icon already existed in the previous version of the plugin, but now it has been redesigned.
When replacing an icon, new icon will keep old icon's:
- Size.
- Color. Also supports color styles.
It is available in multiple places:
- In icon tooltip, if you click it to see more options.
- In footer, if you have only one icon selected.
Animated icons
Unfortunately, Figma does not support SVG animations.
But it does not mean you cannot use animated icons in your work.
The new version of the plugin allows you to import animated icons to Figma. It will parse animations, remove animations and import static icon without animations.
This allows you to use animated icon in the design.
In production code, you can copy SVG with full animations from the Iconify website or use Iconify icon components.
Removed functions
Not all functions from the old version made it to the new version:
- Function to paste SVG (it also decoded icons wrapped in
[func]url()). - Option to minify the plugin window. This option might return if requested, but it is not available in first release.
- Various configuration options.
Feedback
Feedback is welcome.
See [str]feedback page in the plugin or visit support page on website.
update-2024
title: Iconify for Figma update
What's new in Iconify for Figma
Welcome to the new Iconify plugin for Figma.
In 2024, the plugin has been completely rewritten. The new version has nothing in common with the old version, so this is a rather radical change, which requires a tutorial.
Failed redesign
This page shows a failed launch of new UI.
For correct page, see plugin update, attempt 2.
What went wrong?
Idea was good, but implementation was horrible. I focused too much on adding features, forgot about user experience.
What was wrong:
- Tooltips everywhere were annoying, it was hard to scroll without tooltips popping up everywhere.
- Bad design for UI elements. Buttons weren't really different from other elements, making them hard to spot.
- Color overload. Too many shiny colors distracting from content.
- Some integral functions, such as search form, required multiple clicks to access.
This version of plugin was live for 3 days.
After receiving a lot of negative feedback, plugin was reverted to old version. New version was later redesigned from ground up.
... and now back to showing how not to make a release.
New UI
The first change you'll notice immediately is the new layout.
Plugin is designed to fit as much content as possible in the smallest possible space.
You can make it even smaller by clicking the button in navigation to toggle compact width.
Due to limited space, the plugin uses tooltips to show additional information.
License information
One of the biggest changes is advanced license information.
Even though all icon sets are open source, not all open source licenses are equal. Some ask for attribution, some prevent commercial use.
The new plugin shows attribution requirement and commercial use limitation in various places:
- In icon sets list in tooltip for each icon set.
- When browsing icon set, it is shown in tooltip for icon set name.
- When browsing icons, it is shown in tooltip for each icon.
Additionally, you can filter icon sets and search results by license (see below).
Advanced filters
There are many icon sets, finding an icon set that you want might be a challenge.
The new version of the plugin has advanced filters to help you find icon sets.
You can filter icon sets by:
- Category
- Palette
- License
- Icon grid
- Tags (coming very soon)
Favorite icon sets
You can now mark icon sets as favorite.
This can be done by clicking the star button when viewing icon set.
When browsing the icon sets list, if you have marked some icon sets as favorite, you will see the new option to browse only favorite icon sets.
All lists (favorite and recent icon sets, recent icons) are considered to be private data (stored in Figma) and can be cleared.
Scrollable icons
Previous versions of the plugin used pagination to show many icons. You needed to click page buttons to show more icons, which was not convenient.
The new version of the plugin has completely redesigned icons view:
- You can now scroll icons.
- Icons list takes all available space, so the bigger plugin window is, the more icons are shown.
- Pagination is also available if you prefer to use pages.
Color styles
When importing icons, you can now pick color styles in color picker.
Due to Figma plugin system limitation, color picker might not show all color styles.
The plugin has access to:
- Color styles defined in the currently viewed document.
- Color styles used in selected layers.
So if you have color styles shared from another document, the plugin might not see them. To add them to color picker, you need to select any layer that uses that color style.
Solid colors only
Note that the plugin supports only color styles that have one solid color.
Gradients, patterns, colors with opacity are not supported.
Replacing icons
If you have selected a layer that contains icon, which was previously imported with plugin, you will see an option to replace that icon.
Option to replace icon already existed in the previous version of the plugin, but now it has been redesigned.
When replacing an icon, new icon will keep old icon's:
- Size.
- Color. Also supports color styles.
Animated icons
Unfortunately, Figma does not support SVG animations.
But it does not mean you cannot use animated icons in your work.
The new version of the plugin allows you to import animated icons to Figma. It will parse animations, remove animations and import static icon without animations.
This allows you to use animated icon in the design.
In production code, you can copy SVG with full animations from the Iconify website or use Iconify icon components.
Removed functions
Not all functions from the old version made it to the new version:
- Function to paste SVG (it also decoded icons wrapped in
[func]url()). - Option to minify the plugin window. This option might return if requested, but it is not available in first release.
- Various configuration options.
Feedback
Feedback is welcome.
See [str]feedback page in the plugin or visit support page on website.
index
title: Iconify for Penpot
replacements:
- code: "60,000"
value: "${counters.icons}"
- code: "70+"
value: "${counters.sets}+"
Iconify for Penpot
With the Iconify plugin for Penpot you can import over 60,000 vector icons to Penpot.
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 the last page you have visited, making it easy to continue searching or browsing icons.
Installation
Plugin is available at Iconify for Penpot GitHub repository.
To install plugin, open plugin manager in Penpot and add the following URL:
https://penpot.iconify.design/manifest.json
Usage
Browse or search icons, select any icon, click [str]Import Icon button or drag icon to the Penpot document.
Themes
Plugin supports both light and dark themes.
To change theme, change theme in Penpot settings.
Screenshots below demonstrate both themes.
Detailed instructions
After opening the plugin, you will see the main page:
Click any icon set or search icons.
When you click an icon set, the plugin will show you all icons in that icon set. You can filter icons by categories (if the current icon set has them), search icons.
To show more icons, simply scroll the icons list.
You can also search all icon sets for icons. For example, search for "home":
The plugin will show you all icons that match your keyword.
When you hover any icon, you will see a button to show more information.
If you hover it, you will see the icon name. If you click it, you will see:
You can import icon by:
- Using quick import buttons from icon tooltip.
- Dragging icon from plugin window to Penpot document.
- Clicking icon to select it, importing it using buttons in plugin window footer.
Advanced import
When you select an icon, it will appear in page footer with options:
For icons that do not have a hardcoded palette, color picker is available, showing recently used colors:
Support and feedback
Feedback is welcome.
See [str]feedback page in the plugin or visit support page on website.
index
title: Iconify for Sketch
replacements:
- code: '60k'
value: '${counters.icons-short}'
- code: '60,000'
value: '${counters.icons}'
- code: '70+'
value: '${counters.sets}+'
Iconify for Sketch
Want to add icons to your designs?
Iconify for Sketch got you covered. One plugin offers over 60,000 icons from 70+ icon sets.
With Sketch plug-in you can:
- Browse icon sets.
- Search icon sets.
- Import any icon as vector shape to Sketch document.
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.
Installation
Go to plug-in releases page, download the latest file, unpack it, open [file]iconify.sketchplugin in Finder. Finder should launch Sketch that should install plug-in.
If plug-in installation fails, copy [file]iconify.sketchplugin to [file]~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/.
Usage
Browse or search icons, select any icon, click [str]Import button. Plug-in will import icon to your current project.
Screenshots
Importing icon:
Big choice of [str]home icons:
Collections list:
Importing multiple icons:
Available icons
You can browse and import iver 60k open source icons hosted on Iconify API to Sketch projects.
Source code
All source code is available at Iconify for Sketch repository.
To build it, install all necessary dependencies and run [bash]npm run build. Build script will generate [file]iconify.sketchplugin that you can install.