Access over 200,000 icons from popular icon libraries including Material Design Icons, Font Awesome, Heroicons, Bootstrap Icons, and more. Search, preview, and insert SVG icons instantly onto your canvas.
Opening Iconify
Open the Actions panel
Click the Actions button (sparkle icon) in the floating toolbar.
Go to Plugins
Select the Plugins & widgets tab (third tab).
Launch Iconify
Click Iconify Icons to open the icon picker.
Using the Icon Picker
Searching for Icons
Use the search bar to find icons by keyword. For example:
- "home" - Find home/house icons
- "arrow" - Find directional arrows
- "settings" - Find gear/settings icons
- "user profile" - Find user/profile icons
Browsing Icon Collections
Browse by collection to see curated icon sets:
- Material Design Icons (mdi) - 7,000+ icons from Google's Material Design
- Font Awesome (fa) - Popular web icon library
- Heroicons - Beautiful hand-crafted icons
- Bootstrap Icons (bi) - Official Bootstrap icon library
- Lucide - Clean, consistent icon set
- Feather - Simply beautiful open-source icons
- GitHub Octicons (octicon) - GitHub's icon set
- Remix Icon (ri) - Neutral-style icon system
- Ant Design (ant-design) - Enterprise-class UI design
- Tabler Icons (tabler) - 4,200+ pixel-perfect icons
Viewing Recent Icons
The Recent tab shows your recently used icons, making it easy to reuse icons across your designs. Recent icons are stored locally and persist between sessions.
Inserting Icons
Select an icon
Click on any icon in the search results or collection view.
Icon inserted
The icon is instantly inserted onto your canvas as an SVG element at your current viewport center.
Customize the icon
Select the icon and use the Properties Panel to change its color, size, rotation, and effects.
Working with Icons
Changing Icon Color
Icons are inserted as SVG paths with a default fill color. To change the color:
- Select the icon on canvas
- Open the Properties Panel
- Under Fill, click the color swatch
- Choose a new color from the color picker
Resizing Icons
Icons maintain their aspect ratio when resized:
- Drag handles - Hold
Shiftwhile dragging to constrain proportions (already default for icons) - Properties Panel - Enter exact width/height values
- Keyboard - Use
⌘/Ctrl + ↑/↓/←/→to resize in 1px increments
Icon as Component
Convert frequently-used icons to components for easy reuse:
- Select the icon
- Right-click and choose Create Component
- Name your icon component (e.g., "Home Icon")
- Drag instances from the Components panel whenever you need that icon
Create a dedicated "Icons" frame to store all your project icons. This makes it easy to see which icons you're using and maintain consistency across your design.
Managing Recent Icons
Viewing Recent Icons
The plugin remembers up to 20 of your most recently used icons. Access them from the Recent tab to quickly reuse icons without searching again.
Clearing Recent Icons
To clear your icon history:
- Open the Iconify plugin
- Go to the Recent tab
- Click Clear Recent (if available)
Icon Collections Guide
When to Use Each Collection
| Collection | Best For |
|---|---|
| Material Design Icons | Android apps, Material Design UIs, comprehensive coverage |
| Font Awesome | Web design, branding, social media icons |
| Heroicons | Modern web apps, clean minimalist designs |
| Bootstrap Icons | Bootstrap-based websites, consistent UI systems |
| Lucide | Clean, modern interfaces with consistent stroke width |
| Feather | Simple, beautiful icons with 24px grid |
Tips & Best Practices
Consistency
- Stick to one or two icon collections per project for visual consistency
- Use icons of the same style (filled vs. outlined)
- Maintain consistent icon sizes for similar UI elements
Color & Contrast
- Ensure sufficient contrast between icons and backgrounds (4.5:1 minimum for accessibility)
- Use semantic colors (e.g., red for delete, green for success)
- Match icon colors to your brand palette
Size Guidelines
- 16px - Small inline icons, tight spaces
- 20-24px - Standard UI icons, buttons, navigation
- 32-48px - Feature highlights, empty states
- 64px+ - Hero icons, splash screens, large features
Icons are inserted as SVG vector graphics, so they scale perfectly at any size without losing quality.
Troubleshooting
Icon Not Found
If you can't find a specific icon:
- Try different search terms (e.g., "trash" vs. "delete")
- Browse the collection directly if you know which library includes it
- Try searching in a different collection
Icon Looks Distorted
If an icon appears stretched:
- Check that Lock aspect ratio is enabled in Properties Panel
- Reset the icon to its original aspect ratio
- Re-insert the icon from the plugin