The Icon Manager makes it easy to use SVG icons in your Blocs-built websites. It also includes powerful management features, allowing you to add new icon sets effortlessly, create custom sets, and even share them with others.
Open Icon Manager
To launch the Icon Manager, head up to the Main Menu Bar and from the Windows menu, select Icon Manager or alternatively use the keyboard shortcut ⌘9.
Insert Icon onto Web Page
The easiest way to add an icon to your website is by dragging it from the Icon Manager onto your web page. Alternatively, you can add an Icon Bric to your page, select it, and then click an icon in the Icon Manager to apply it.
Icon Sets
The Icon Manager supports custom icon sets, allowing you to organise and arrange icons effortlessly using drag-and-drop. Your icon sets are conveniently listed on the left side of the Icon Manager window for easy access.
You can toggle the icon list sidebar on or off using the button in the top-right corner of the Icon Manager window.
Icon Set Search
Use the icon set search field to quickly filter available icon sets. You’ll find it at the bottom of the left sidebar.
Add New Icon Set
To add a new icon set, simply click the + button which is located at the top-right of the icon grid and select Add New Set from the available options.
This will create a new empty icon set folder, which you can place icons into.
You can also quickly add new custom icon sets that contain icons by dragging folders of SVG files from macOS Finder onto the left sidebar.
Rename Icon Set
To rename an icon set, select it from the list and press the Return key. This will enable text editing for the icon set’s label. Once you’ve finished editing, press Return again to confirm the changes and exit edit mode.
Duplicate Icon Set
To duplicate an icon set, right-click it in the left sidebar and select Duplicate from the context menu.
Export Icon Set
To export an icon set, right-click it in the left sidebar and select Export from the context menu.
Delete Icon Set
To delete an icon set, click the trash icon located at the right side of the icon set list item.
Pre-installed core icon sets in Blocs cannot be deleted. The delete option is only available for custom icon sets.
Icons
All icons in the Icon Manager are lightweight, vector-based SVG files, making them ideal for use on websites. You can create these files using apps like Sketch and Adobe Illustrator.
Add Icon
To add a new SVG icon to the Icon Manager, click the + button at the top-right of the icon grid and select Import Icons. From there, you can import individual SVG files, a folder of SVGs, a Blocs icon set file (.blocs-icons), or an IconJar icon set file (.iconjar).
You can also quickly add new SVG icons by dragging them directly from macOS Finder into the Icon Manager.
Edit Icon Details
The Icon Manager includes built-in inspector controls, which can be toggled on or off using the button in the top-right corner of the window.
The inspector makes it easy to edit an icons name, set the keywords used for search and also set the colour mode.
As well as this, you can easily update or replace any icon in your library (except core icons) by dragging an SVG file onto the image well in the Inspector. This will update the icon’s graphic data in your library.
Icon Search
The search field at the top of the icon grid lets you filter icons within the currently selected icon set.
Manage Mode
When Manage Mode is enabled, selections won’t be applied to the currently selected element on the design canvas. This makes it easier to reorder and drag icons into sets.
You can also activate Manage Mode by dragging an icon tile and holding it between two other tiles for two seconds. Manage Mode will automatically toggle on. This feature is unavailable when a search filter is active.
Resize Icon Tiles
Use the resize slider at the bottom center of the window to quickly adjust tile sizes. You can also click the grid icons on either side of the slider to nudge the tile size up or down.
