IKONO v2.0.0: Customisable colours, tailor-made icon variants and developing for the future

Over the past few months, I have been able to significantly improve the way that icons are built, generated and shared within IKONO. This has involved a large number of architectural changes to allow us to grow without hitting roadblocks.

What's changed?

Whilst as a whole the interface looks the same (with some minor improvements to interactions and transitions), under the hood there has been a big change to how icon variants are stored and generated. This gives us the ability to support icons of different sizes and variants.

Improved consistency

IKONO was created as a result of me designing icons for various projects as needed. This meant that there they were all designed in isolation with little consistency. This led to a large library of inconsistent sizing, borders and styling.

In version 2.0.0, all icons have been painstakingly updated to fit with new IKONO icon style guidelines:

• Stroke width should be 1.5px.
• Standard icons should have a container of 24x24 with mini fitting into 20x20.
• Icons should fit roughly within set template boundaries for each size.
• Lines should have a round end cap - limited exceptions may apply.

Applying these rules ensures that all icons can be paired together and look consistent throughout your interfaces.

Custom set of mini icons

Improved consistency was a big focus in this release. Previously, mini icons were generated automatically during build and were based on the standard icons. This meant there was no control over the look and feel of the mini icons which meant they were not optimised for their size.

To change this I spent a lot of time manually rescaling and updating all of the standard icons to build a full pack of custom mini icons that were consistent with each other.

Improvements to the UI

One main reason for building and sharing the IKONO interface for free was to streamline the process of integrating icons into your app. This meant the interface had to be as seamless as possible.

Currently, there are a number of ways of getting an icon from IKONO:

• Copying the SVG or JSX directly via one of the clickable buttons in the interface.
• Exporting the icon as a PNG.
• Using the React library.
• Using the Figma plugin.

Previously, the limitations in icon implementation meant that not all icon options were supported. Now, you can customise all icon options directly within the UI. This includes:

• Altering icon colour.
• Viewing the improved mini icon variant.
• Exporting icon PNG with all size, colour and variants.

One major change to the interface is the addition of a new dark mode. This required an overhaul of the way styles were built into the UI and should be a welcome improvement, offering a more user-friendly experience.

There have also been a number minor updates, fixes and improvements to the style across the UI.

Improvements to the React library

The React library has been updated to properly support the new icon variants. Along with this there have been a number of other changes:

• Support for tree shaking.
• Size variants built directly into each icon component.
• Better icon component type which extends the SVG element type.
• A color prop to override the default colour of the icon.

Summary

IKONO v2.0.0 brings major improvements with more consistent and customisable icons. The update includes a new set of mini icons, enhanced UI options, and better integration through the React library and Figma plugin. With a strong focus on consistency, these changes make it easier to find, use, and customize icons, ensuring a smoother experience for your projects.

Whats next?

Check out what else IKONO Icons has to offer.