Exporting icons

You can use the Nucleo app to export icons in different formats and resolutions. You can also generate icon systems (icon fonts, SVG sprites, SVG symbols…), and integrate them into your web/mobile projects.

There are 3 ways to export icons in Nucleo. You can either:

1. Drag an icon from Nucleo to your favorite apps
2. Copy an icon using the context menu
3. Use the Icon Exporter

Icon drag-out #

The simplest way to export an icon is to drag it from Nucleo into your favorite application.

You can change the export format (e.g., from SVG to PNG) in the app settings.

Context menu #

Right-click on an icon to display the context menu, where you'll find different options to copy the icon code.

Optionally, you can check the option to remove inline colors and stroke-width values in the app settings.

Icon exporter #

To launch the Icon Exporter, you can either:

• Select one or multiple icons and click the 'Export' button in the bottom-right of the app
• Select one or multiple icons and press Cmd E (Ctrl E on Windows)
• Select a set/project and press Cmd E (Ctrl E on Windows)
• Select one or multiple icons, right-click to display the context menu > Export

The Icon Exporter has the following export options:

• SVG
• PNG
• PDF
• Icon Font
• JSON
• JSX
• Vue

SVG #

SVG is the most popular icon format. You can use Nucleo to export the icons as single SVG files, SVG sprites 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 exported icons
• Add padding (the padding increases the size of the icon)
• Make the icons responsive by removing width and height from the SVG code → the icons will expand to fill the parent width
• Remove inline colors
• Remove stroke-width values
• 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 option will automatically create a clone of each icon, with the newly selected color.

The SVG <symbol> option generates an SVG file containing all the icons, along with the CSS and demo files to manage them.

Think of SVG symbols as a great (better) alternative to icon fonts. They combine the simplicity of icon fonts with the advanced customization options of inline SVG code.

Learn more about SVG symbols in our guide on integrating icon systems.

PNG #

Use the PNG option if you need to export a raster version of your icons. The advanced options allow you to set custom resolutions or to use the Android/iOS presets.

PDF #

The PDF option generates a folder containing all the icons as separate PDF files. Optionally, you can set a custom export size.

Icon font #

The icon font format is the most popular way to integrate icons in web projects. Nucleo generates the font files along with the CSS and demo files to copy the icons. The advanced options include adding metadata, editing metrics and creating Base64 encoded fonts.

The name of the icon is also the class name. Change it in the info panel to modify the class name.

JSON #

JSON files are the most versatile format if you need advanced icon integrations in your projects. They include the SVG code of the icons and additional metadata like set names and search tags.

The JSON files exported using Nucleo can be imported back by dragging them over the app.

JSX #

If you're working on a React project, use the JSX option to export the icons as JSX files and create icon components.

Vue #

If you're working on a Vue project, use the VUE option to export the icons as .vue files and create icon components.

Teams →