Exporting Icons

Nucleo app facilitates the export of icons in various formats and resolutions. You can also generate icon systems like icon fonts, SVG sprites, and SVG symbols.

There are three main methods to export icons:

1. Drag an icon: Simply drag an icon from Nucleo to your preferred application.
2. Context menu: Right-click on an icon to access options for copying the icon code.
3. Icon Exporter: Use this for advanced export options.

Icon Drag-Out #

The easiest export method is to drag and drop the icon directly into your application. You can adjust the export format (e.g., SVG to PNG) in the app settings.

Context Menu #

The context menu, accessed by right-clicking on an icon, provides various options to copy the icon code. You can also customize the context-menu code preferences in the app settings.

Icon Exporter #

To launch the Icon Exporter:

• Select one or more icons and click the 'Export' button at the bottom-right of the app.
• Use Cmd E (Ctrl E on Windows) after selecting icons or a set/project.
• Right-click on selected icons and choose 'Export' from the context menu.

Note: To maintain Unicode and CSS class values of icon fonts, add icons to a project and export the project instead of the set.

Exporting Icons as SVG Files #

SVG is a widely-used icon format. Nucleo allows you to export icons as single SVG files, SVG sprites, or SVG symbols.

• Single SVGs: Export each icon as a separate SVG file with options for custom size, padding, color and stroke-width adjustments, and title element removal.
• SVG Sprite: This creates a single SVG file with all icons in a grid layout, accompanied by a CSS file for specific icon targeting.
• SVG Symbols: Generate an SVG file containing all icons, along with CSS and demo files for management. SVG symbols offer the simplicity of icon fonts with the customization of inline SVG.

Important: When exporting a Nucleo project as SVG symbols, you can directly access each icon's code via the icon context menu.

Teams →