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
Search results are paginated. Use the page navigation at the bottom to browse through results when there are more icons than fit on one page.
Browsing Icon Collections
The icon picker features a collection browser that lets you explore all 150+ icon sets. Click the collection dropdown to see the full list, including:
- Material Design Icons (mdi) - 7,000+ icons from Google's Material Design
- Font Awesome 6 (fa6-solid) - Popular web icon library
- Heroicons - Beautiful hand-crafted icons
- Bootstrap Icons (bi) - Official Bootstrap icon library
- Lucide - Clean, consistent icon set
- Phosphor (ph) - Flexible icon family with multiple styles
- GitHub Octicons (octicon) - GitHub's icon set
- Carbon - IBM's open-source icon library
- Ionicons (ion) - Premium icons for Ionic framework
- Tabler Icons (tabler) - 4,200+ pixel-perfect icons
Each collection shows icon count, author, and license information. Icons are displayed in a paginated grid (100 per page) with page navigation controls.
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
There are two ways to place icons on your canvas:
Click to Insert
Click an icon
Click on any icon in the search results or collection view.
Icon inserted at center
The icon is instantly inserted onto your canvas at the viewport center. When inserting multiple icons, each one is automatically offset by 20px to prevent overlapping.
Customize the icon
Select the icon and use the Properties Panel to change its color, size, rotation, and effects.
Drag to Place
Drag an icon tile
Start dragging any icon tile in the picker. The dialog will close and you'll enter placement mode.
Click to place
Your cursor changes to a crosshair. A floating label shows which icon you're placing. Click anywhere on the canvas to place the icon at that exact position.
Cancel if needed
Press Escape to cancel placement mode without inserting the icon.
Use click-to-insert for quick prototyping, and drag-to-place when you need precise positioning on the canvas.
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