Importing Icons

You can import your icons in Nucleo. To create a new Set of icons, use the + symbol in the left app panel, or right-click on the left panel > Create New Set. Another option is to drag your icons over the app.

Create new set

Import or drag your icons over the Import Icons modal, select the icons style and type in the set name. Then press the [Create New Set] button to import the icons and create the new set.

A few important information about importing icons in Nucleo:

  1. Only SVG icons can be imported in Nucleo; all other formats will be ignored.
  2. You can either drag and import SVG files, SVG fonts, folders containing SVG files, SVG symbols, .iconjar files or .JSON files.
  3. You can import JSON files previously exported using Nucleo. Not all JSON files can be imported. The template of the file has to be same of the one exported using Nucleo.
  4. Nucleo allows one level of indentation only: if you import a folder with multiple sub-folders, only the first sub-level will be imported (deeper sub-folders will be merged).

Important: if the icons share the same CSS classes or mask IDs in their SVG code, they look identical when used in the browser or imported in Nucleo. If you're using Sketch to export icons, you can use their SVGO compressor plugin to make sure the exported icons don't share mask IDs.

Customizing Icons 👉