Introducing the Icon Editor
What’s new in Nucleo v2.5.3 | nucleoapp.com
The #1 goal of Nucleo is simplifying the way designers and developers work with icons. The Icon Editor is another step in that direction! This new tool that we’re thrilled to introduce today allows you to make in seconds changes that would otherwise be laborious (e.g., editing the icon size, flipping the icon or adding extra padding). Besides, it extends some advanced customization options, so far available only to the Nucleo icons, to all the icons imported into the Nucleo app.
⚠️ Important (only Mac users using v2.4.5) → Due to a technical issue, the only way to upgrade to v2.5.3 is to download it at https://nucleoapp.com/downloads. Sorry for the inconvenience!
The first time you hear about Nucleo? Learn more and download the app for free at https://nucleoapp.com/
Speed up everyday icon operations
The first problem we tried to solve with the Icon Editor was speeding up some standard actions that would typically require you to export the icon → open it into a vector editor → modify it → export it using the vector editor → re-import it into Nucleo.
Here’s an example: you saved a “right-arrow” into a project, and you need a copy of the same icon, but pointing left. You can select the icon in Nucleo, press the Space key to launch the editor, click on the “flip horizontal” button, and save a copy of the icon.
Another example: you have a collection of icons of a specific size, and you wish to update it. Once again, you can launch the Icon Editor, set the new size, and press the Save button (or the Create copy button if you prefer to create a copy).
Enable advanced customization options
One of the significant advantages of using Nucleo is the possibility to customize the icons on the fly using the Customization Tools situated in the right sidebar. Some of these editing options apply only to the Nucleo icons though. The reason behind this limitation is that our icons are built in a particular way: their code includes data-types that communicate with the app and inform it about which elements can be modified and how. Also, the Nucleo icons have a minimal design and support different stroke values.
It’s clear that we couldn’t automatically extend these advanced customizations to all icons imported into the app. But we did find a way to allow the user to choose which icons should be editable and what are their constraints.
The Icon Editor includes the following advanced options:
1 — Enable stroke customization (⚠️ available only for the outline icons) → it enables you to control the stroke value using the app customization tools.
2 — Add secondary color → it allows you to set a secondary tone for specific icon elements. You can then toggle the secondary color in the customization tools section.
What’s next?
Now that version 1.0 of the Icon Editor is available to anyone, we can collect feedbacks and see how to improve it. There’s so much more we can add to this tool. Besides that, we’ll keep working to make the app better and we’ll keep crafting new icons and send them your way.
Feedbacks/suggestions? Feel free to comment on the article. Don’t forget to follow us here on Medium or Twitter for more icon-related articles!
