Nucleo: The Ultimate Setup Guide Nucleo is a powerful icon management tool and library designed for designers and developers. It helps you organize, customize, and export thousands of icons seamlessly. This guide covers how to set up Nucleo, organize your workspace, and integrate it into your design and development workflows. Step 1: Download and Installation
To get started, you need to install the desktop application, which acts as the hub for your icon library. Visit the official Nucleo website.
Download the application installer for your operating system (macOS or Windows). Run the installer and follow the on-screen prompts.
Launch the app and log in to your account, or create a new one to sync your purchases. Step 2: Setting Up Your Workspace
Once the application is open, you can configure your library and import icons.
Create projects: Use the left sidebar to create new projects or categories. This keeps icons grouped by client, website, or application.
Import existing icons: Drag and drop your own SVG icons or icon folders directly into the application window.
Organize with tags: Select icons and add descriptive tags in the right-hand panel to make searching faster later. Step 3: Customizing Icons
Nucleo allows you to modify icons globally or individually before exporting them.
Adjust stroke width: Use the customization slider to change the thickness of line icons.
Change colors: Apply uniform colors to your icons using the color picker or by entering specific HEX codes.
Resize icons: Scale your icons to standard grid sizes (e.g., 16px, 24px, 32px, or 64px) to maintain design consistency. Step 4: Integration with Design Tools
Nucleo connects directly with popular design software to speed up your asset creation.
Figma integration: Open Nucleo alongside Figma. You can drag and drop any icon directly from the Nucleo app into your Figma canvas as a clean SVG vector layer.
Sketch and Adobe XD: The drag-and-drop functionality works identically for Sketch and Adobe XD, preserving icon layers and vector paths. Step 5: Exporting for Developers
For developers, Nucleo offers flexible export options to quickly implement icons into codebases.
Export formats: Select your icons and export them as SVGs, PNGs, or PDF files.
Icon fonts: Generate custom icon fonts directly from the application, complete with CSS and HTML starter templates.
SVG symbols: Export icons as an SVG sprite sheet, which allows you to reference icons using the tag in HTML. To help tailor this guide further, let me know: What design tool or development framework do you use most? Are you using the free version or the premium library?
Do you need specific code examples for React, Vue, or Tailwind CSS?
I can expand any section with step-by-step instructions for your specific tech stack.
Leave a Reply