Organizing icons
Nucleo is structured in 3 main sections:
- All Icons
- Favorites
- Projects
To navigate from one section to the other, use the navigation in the top center of the application.
All Icons
All your icons are organized in the 'All Icons' area, where you can create icon collections (sets) and filter the visible icons using the search, style, and size filters.
The 'All Icons' section is a visual representation of your icon database.
Favorites
The 'Favorites' area is a clone of the 'All Icons' area, except that it shows only the icons marked as favorite.
To mark an icon as a favorite, click on the small ⭐ star symbol on the top-right of each icon.
Projects
While the 'All Icons' area is used to organize the icons in icon families (sets), the 'Projects' area is where you organize your icons in smart collections (i.e., projects).
Let's assume, for example, you have a set containing 3000 icons. You're using a subset of them (100) to design a mobile application. You can store them in a project. Optionally, you can mix icons from different sets in the same project.
The icons saved in a project are no longer linked to the original ones. They behave as a separate entity. Deleting the original icons in the 'All Icons' area won't affect the project icons.
To add icons to a project, you can either:
- Select one or more icons, then right-click to trigger the context menu > Add to Project...
- Select one or more icons, then click the 'Add to Project' button in bottom-right of the app
Why you should use Projects:
- When you add an icon to a project, it becomes a new entity; if you update/delete the icon in the 'All Icons' area, these changes won't affect the Projects area.
- If you add/remove icons in a project, the Unicode values and CSS classes (i.e., icon name) will be preserved. You can export a new icon font and replace the old CSS files.
- You can save the project customization options.
- You can copy the icon font CSS classes or the SVG symbol code directly from the icon context menu!
Replace icon
You can replace a project icon and preserve its tags and Unicode value using the 'Replace Icon' feature.
To replace an icon, open the context menu and select 'Replace Icon'. Use the modal window to select a new icon.
This feature is particularly handy if you're working on a design system with the rest of the team and you need to update an asset without affecting, for example, the icon font Unicode values.
