Mockitt offers a rich library of icon resources to help you quickly add graphic elements to your prototypes. These icons are perfect for buttons, navigation, indicators, and more.
Opening the Icon Panel
- Open Icon Panel: The Icon Panel is located in the left toolbar of the editor. You can open it quickly by clicking the icon or using the shortcut
2.
- Search Icons: Use the search bar at the top of the Icon Panel to find specific icons by keyword. The panel will display matching results for quick access.
Selection and Settings
- Select Icon: Once the panel is open, you can find recommended icons in the Discover tab. You can also view Favorites and Community resources in the "Icon Library" tab. The Community contains icon packs in various styles that you can view and favorite.
- Set Color and Size: At the top of the Icon Panel, you can set the default color and size for icons. Once set, newly added icons will apply these defaults automatically, saving you from repetitive adjustments.
Using Icons
- Add Icon: Double-click an icon or drag it onto the canvas to add it.
- Replace Icon: Select an icon on the canvas, then use the replace option in the right property panel. This opens the Icon Library where you can search for and select a replacement.
- Flip Horizontal/Vertical: Select the icon on the canvas and use the flip controls in the right property panel to flip it horizontally or vertically.
- Adjust Appearance: Select the icon to customize its border, color, shadow, and other properties via the right property panel.
Exporting Icons
- Export SVG: Mockitt supports exporting icons in SVG format. Select the icon you wish to export and click the Export button in the bottom right corner to save it locally.
- Batch Export: To export multiple icons, hold the Shift key, select the desired icons, and click Export.
- Export from Preview: In the Preview or Handoff mode, switch to Overview in the top bar. Select the icon and click Export to save the SVG.