How to Create an Icon Library Component

Pedro Oliveira

4/21/2022

How to Create an Icon Library Component
Back to Top Arrow

There is a saying on the internet that one day, after finding a floppy disk, a child said to his father “oh, why did you 3D print the save icon?”.

As from my side, I also have the save icon in a pillow format.

Save icon pillow

Thanks to my older sister!

Icons are a huge and important part of any UI. It’s not easy to find an interface without a single icon representing something. Either it’s a back arrow, an “hamburger menu” or a warning sign. Icons can represent a language for themselves without any text attached.

I always think about the Egyptian hieroglyphics when thinking about the iconography of an application. We can definitely communicate without any words and express something or enhance an action.

Like the floppy disk, that reincarnated as a global icon, we have a couple of other examples that somehow turned themselves into globally accepted representations of something on the UI.

Is there anyone who after looking at “3 horizontal lines” or “3 vertical aligned points” doesn't immediately recognize them as a MENU?

Icon library

Menu Icons by Alex Muench

We all agree that having an iconography is important, not just for usability and experience reasons but also as a complement to simplify the UI and make it even more beautiful.

The purpose of this article is not just to inspire you, but also to guide and show you how easy it is to create a font of icons that we can use in our applications. Being our secondary focus the OutSystems platform.

Tools

As I said, building a font of icons is easy and the first step we need to fulfil is having the icons that we need in an SVG format. Since SVG is a vectorial approach for having an image, it will allow us to easily manipulate each icon inside the tool that we choose to generate the font.

If we are on a project that has a well defined UI KIT developed on Figma, Sketch or any other tool, the iconography is going to be something that is probably represented there and we can use those same tools to extract the icons in an SVG format.

Icon edit

Example on how to extract an icon from a Figma document into an SVG file.

For a UI designer to create a set of icons, there is not much to say aside a handful of best practices that I encourage to be followed to reduce the margin for errors when generating the font:

  • Use a single color for all the icons (don’t matter what color is);
  • Always convert strokes into fills;
  • Keep all fills combined into a single group;
  • Instead of using the white color for making holes in your icon, subtract the foreground shape from the background shape. This will avoid rendering problems when using a tool to create a font. Most of these tools will interpret all colors like black and the “white holes” will also be black and therefore will not be visible.

elipse

Using an “Elipse” to represent the dot below the exclamation line…

… will result in a broken icon when generating a font from it.

After grabbing our set of icons, it’s time to decide what tool should we use to create the actual font to be applied to an application.

I can recommend at least two tools for this purpose:

Icomoon

Fontello

Both of them will allow you to upload and create custom fonts for your iconography, both can be used for “free’ish” and both are customizable.

However in my opinion (which is based on years of experience), even using just the free version, Icomoon is still the best tool available out there and that being said, I am going to focus this article on this tool.

However, don’t be sad because a lot that is being shared here is valid for any other tool that you may want to use.

Icommon

To help you decide, let me share some of the cool features that Icomoon offers:

Importing Icons

As you will see next, you can import icons into your project using a JSON file, using the “Import Icons” button at the top or you can simply drag and drop your SVG file inside your project.

Save your projects

The Icomoon’s free version doesn't allow us to store our libraries on a cloud (it only saves your projects in the browser’s cache) and sync the same projects between different computers. To do that, when we generate a font, Icomoon generates a ZIP file and inside it, we will have a JSON file that we can use inside Icomoon to open the same project in a different machine.

Zip file generated by Icomoon

Import a project and use the “selection.json” file to open your project.

Since Icomoon uses cache to store the projects, if you clear your browsing data you will lose all your projects. Don’t forget to keep saving your project versions in your local machine. Just in case!

Edit Features

Personally, I love the edit features from Icomoon. By far, this is the most valuable feature. As a front-end developer, I really hate being dependable on a UI team to help me fix small things such as an icon. Simply because this “going back and forward” with fix requests can easily turn into a bottleneck when implementing an interface.

The only help from the UI team that I desire is for them to deliver the icons while following those 4 rules that I mentioned before.

However, if they fail to follow those best practices or if they forget to deliver some icons (and believe me, they will forget), Icomoon can give us unbelievable help on fixing almost everything.

Grid

It’s important to make sure that our icon is encapsulated inside a squared area and that all the icons are using the same grid size. This will ensure that our icons are going to have the same height as our text in the page. I personally like to use a grid of size 32 because it will allow me to manipulate the icon inside more precisely.

Move/Positioning the icon

This tool allows us to move our icon inside its container. Very useful in scenarios where an icon has more visual weight on one side than on the other and we need to move it a little, so the user has the feeling that the icon is aligned.

Scaling

Scaling our icon is also useful in situations where the UI team fails to give us consistent icons in terms of size or if we want to have a “safe area” surrounding our icon (I use this approach a lot of times).

Naming our icon

Naming our icon is very important (as we will see further ahead in this article). Try to keep a consistent naming convention (avoid having some icons named “card-outline” and others called “MessageEnvelope”, instead use “message-envelope”), use simple and short words like “back”, “info-sign”, “profile” and try to use a word that clearly represents the icon (instead of “reward” use “star” for an icon that is a star).

Clear icon colours

One of the beauties of using an icon is that the icon will behave like any other character. We can change its size, or any other attribute that regular text has and we can also change its colour to any value we want. But this only works well if the icon only has one colour defined. If it has more than one colour, only the main one is going to change if we apply a css “color” attribute.

That’s where this “Remove Colors” tool is helpful. It will remove all the secondary colours that are being applied to the icon and leave it just black.

Saving the font

To generate a font, we just need to select the icon we want and hit the “Generate Font” button at the bottom.

One of the good things here is that Icomoon will warn us if any of the selected icons has problems with the “using strokes instead of fills” situation we talked before. This gives us the chance to identify “bad” icons and ask the UI team to fix them.

After hitting the button, we can review and change the code for each icon if we want.

In the end, and before downloading the ZIP with the font files, css and JSON, we have a couple of settings that we can customise.

If we click on the “Cog” icon, we will be able to change and customise some parameters for our font:

  • Define the name for our font (typically is the name of the client our project is being developed for);
  • We can define a prefix (useful if we have multiple iconography fonts and we need to be able to identify each one);
  • We can chose the selector we want to use in our iconography identifier;
  • Keep track of versions by changing the version number.

After all of these steps, it’s now safe to hit “Download” and save the zip file on our machine.

Next I will show you how to create a custom component inside OutSystems Service Studio to support our iconography font.

Icon Component

Having a font is fun enough but is not very useful if we don’t use it to enable the development teams with a component they can use in their applications.

For the next topics, I am going to try to explain how to build in OutSystems a strong icon component.

Where to save the font?

The first thing we should take care about is to place our font file somewhere in Service Studio. Since what we are building is a component, and components modules should be placed inside a theme application (side by side with the theme module and resources), we can put our font file inside the theme module. Also, just for organisation purposes, I recommend to place the file inside a folder called “icons” for example.

View of the Data tab in OutSystem’s Service Studio

For me it makes sense to be there since the CSS that will support our font will also be placed in this same module.

Where to add the CSS?

Luckily, when we download the Icomoon Zip file with our font, alongside with the font files and JSON, Icomoon also presents us with a complete CSS file with all the code that we need to add on Service Studio.

Since we are talking about CSS, the most logical place to add it’s in the theme, inside the same module where the font files are located.

View of the theme CSS concerning our font

Copy the code inside the zip on the “.css” file and paste it inside the theme’s CSS as it is.

The important detail here is that the path to the font file/s should be reviewed to find if they are correct (don’t worry because OutSystems can check that for you and will raise an error if the path does not exist).

Creating the icon component

To build a strong and reusable component, we will follow a couple of practices that I always recommend to implement in these situations:

  1. I recommend to use at least 3 input parameters:
  • Name: it will receive the name of the icon (defined in the Icomoon while adding the icons);
  • Size: set the size of the icon (similar to what OS is using with their Icon component);
  • ExtendedClass: useful to add some extra style to our icon without the need of adding more containers on the page.

Input parameters on our custom icon component

  1. Create the component structure:
  1. Add an if and set it to False;
  2. In the True branch, place an image that you will use to represent an icon. This is useful for the developers that when they drop our component to a page, they will see that image indicating that an icon is there.
  3. In the False branch, place an HTML Element and set it to be an <i> element from HTML (also works with a simple DIV container). The reason for this is because OutSystems, even if we have the IF statement set to False, inside Service Senter que True branch will always the one visible when using a component inside a page;

Icon component structure

  1. In the HTML Elements attributes, add a new attribute called “class” and add the following information:

  • myproject” class will help identify the font that we want to show;
  • icon” can help us identify that this is an element to display an icon;
  • ‘myproject-’ + Name” is going to be the actual class corresponding to a specific icon on our font. We are going to concatenate with the name defined in Icomoon to match what we want to see. You can check out the CSS file inside the Zip to see that each icon starts with this prefix (defined in Icomoon before downloading the zip)
  • Concatenate the two input parameters;

After this, there is not much to do and basically your component is ready. Don’t forget to document all the input parameters (by adding descriptions), to set the component as “Public” and to test it.

An advice I can give is that since you probably have more than one icon in your font, it would be very helpful for the developers to have a place where they can search for icons. The best way of doing this is to document the icon in the Live Style Guide that is documenting your main theme (if you have one. If not, you should).

Example on how you can document a complete set of icons in your Live Style Guide

Don’t forget that everything we do is going to be used by developers at a certain point in time and they should be able to, alone, understand how things work.

Conclusions

There may be a lot to say about icons and a lot of stories about how some specific icons became such “iconic” in the UI world.

For example, how would you create an icon that clearly is representing a rainbow if we cannot use any colour rather than black? Or do you know what the “Power On/Off” icon actually represents?

Common accepted “Power On/Off” icon

Take some time to look for the most common icons and try to find their real meaning, I am sure you will find some incredible and inspiring stuff.

Thanks for your reading and see you next article!

Blog

Where design meets thinking.

Lisbon