Customizing icons
Nucleo comes packed with some powerful editing features. You can use the app to edit colors, strokes and add frames to your icons.
The customization tools are situated in the right sidebar. Please note that while the Nucleo icons support all the editing options by default, the other icons won't support all the customization options unless you enable them using the icon editor.
Customizing the Nucleo icons
The Nucleo icons support all the app customization options. By unlocking them, you will enjoy the full potential of the Nucleo app!
The size of the icon determines the max stroke value supported:
- 16px icons → up to 1px stroke, only round corners
- 24px and 32px icons → up to 2px stroke
- 48px and 64px icons → up to 4px stroke
Icon editor
The Icon Editor allows you to edit some icon options (e.g., you can set a new size and add padding), and extend the advanced customization options to all the icons you import into Nucleo.
To launch the editor, you can either:
- Select an icon and press the Space key
- Right-click on an icon > Edit icon
- Double-click on the icon
You can also select multiple icons and modify them in bulk (Select the icons and press the Space key). This option is particularly handy if, for example, you want to edit the size of multiple icons at once, or if you want to enable the stroke customizations for all the icons of a set.
Optionally, you can enable the stroke customization and add a secondary color. If enabled, these 2 options can be controlled in the Customization Tools area situated in the right sidebar of the app. The stroke option can be enabled only for outline icons (it affects the stroke values of the SVG elements).
To save the changes, you can either 1) press the Save button or 2) press the Create Copy button if you wish to create a copy instead of modifying the current icon.
Icon transition generator
The Icon Transition Generator allows you create a snappy transition between two icons.
To launch the transition generator, select the two icons you want to combine, then right click on one icon > Create Transition.
You can then export the new transition icon as HTML/CSS/JS, Vue.js or React code.
