You can use the Nucleo app to export icons in different formats and resolutions. You can even generate icon systems (icon fonts, SVG sprites, SVG symbols…), and integrate them into your web/mobile projects.
Do you want to learn how to use the icons exported via the Nucleo app? Check our guide on integrating icon systems.
There are two ways to export icons in Nucleo. You can either 1) copy an icon via the context menu or 2) use the Icon Exporter window.
The icon context menu (right-click on an icon or click on the settings gear symbol) allows you to copy the code of the icon directly from the gallery. It's the fastest way to integrate vector assets into your project.
Optionally, you can choose which formats to display in the context menu. Simply uncheck the options you don't use in the app settings window. You can even set some advanced options, like removing inline colors from the icons copied via the context menu.
The Icon Exporter
The Icon Exporter is one of the most powerful features of the Nucleo app.
To trigger the export window, select one or multiple icons, then click on the [Export] button or press Cmd+E on Mac (Ctrl+E on Windows). If you wish to export entire sets or projects, you can right-click on the set/project and select "Export" in the context menu.
Please note that if you want to preserve Unicode and CSS class values, you should add the icons to a project and then export the project as icon font / SVG sprite / SVG <symbol>.
Nucleo supports the following export options:
- SVG - single SVG files, image sprites or SVG symbols
- PNG - multiple resolutions and ready-to-use iOS + Android formats
- Icon Font
- JSON - a single file containing icons + metadata
- JSX - ReactJS-friendly SVG code
- Vue - Vue.js-friendly SVG code
SVG is the most popular icon format. According to your needs, you may want to export the icons as single SVG files, SVG sprite or SVG symbols.
The Single SVGs option exports each icon as a single SVG file. Optionally, you can:
- Set a custom size for all the icons exported.
- Make all icons responsive when used in coding. This option will remove the width and height from the SVG code so that icons will expand to fill the parent container.
- Remove inline colors, and customize them later directly in coding.
- Remove stroke-width values, and customize them later directly in coding.
- Remove the <title> element
The SVG Sprite option generates an image sprite, which is a single SVG file containing all icons distributed in a grid layout. You can then import the image sprite in your web project, and use the CSS file generated by Nucleo to target specific icons.
Optionally, you can set a secondary color. This will automatically generate a clone of each icon, with the newly selected color.
The SVG <symbol> option is perfect if you want to export all icons of a project and include them in your design system. Nucleo generates the SVG file that contains all icons, along with the CSS and demo files to manage them.
Think of SVG <symbol> as an alternative to icon fonts, with the advantage of supporting advanced customization options like duo-tone icons and stroke values.
Learn more on SVG <symbol> in our guide on integrating icon systems.
If you're exporting the SVG <symbol> from a Project, you can grab the icon code directly via the icon context menu.
If you need to export a raster version of your icons, then the PNG option will come in handy! The advanced options allow you to set custom resolutions, or to use the Android and iOS presets.
The PDF option generates a folder containing all icons as separate PDF files. Optionally, you can set a custom export size.
The icon font format is super popular in web projects. Nucleo generates the font files, along with the CSS and demo files to manage the icons. The advanced options include adding metadata, editing metrics and creating Base64 encoded fonts.
To change the CSS class name of an icon, just edit its name in the info panel.
You can use Nucleo to export icons with stroke values. However, this is an experimental feature. It requires us to run some extra steps to convert the icons to icon font. Specifically, we need to "expand the strokes" before starting the conversion.
Please note that if you want to preserve Unicode and CSS class values, you should add the icons to a project and then export the project as icon font. Besides, if you're exporting the font from a Project, you can grab the CSS class names directly via the icon context menu.
JSON files are the most versatile files when it comes to sharing icon sets with fellow designers/developers. They include the icons (SVG content) and additional metadata like set names and search tags.
The great thing about JSON files exported using Nucleo is that you can import them back, simply by dragging them over the app.
If you're working on a project that uses React, then the JSX option is a lifesaver! Instead of exporting all icons and then converting them into JSX files, Nucleo does the heavy work for you so that you can create icon components with ease.
If you're working on a project that uses Vue.js, then the VUE option is what you're looking for! It generates .vue files that can be used to create icon components.