Making an icons library from scratch
A. Why this matters
Iconography is a part of a great user experience, espescially on digital product design. Icons are an essential part of many user interfaces, visually expressing objects, actions and ideas. When done correctly, they communicate the core idea and intent of a product or action, and they bring a lot of nice benefits to user interfaces, such as saving screen real estate and enhancing aesthetic appeal. In the other hand, icons is like a language to communicate with others.
B. The Challenges
- Defining an icon to create
The most important challenges to creating icons library is about choosing several essential icons to create. it’s start from basic icons like icons for navigation, view, etc.
2. Make it align with brand
To create this, first we must know the brand direction.This is a well-researched psychological effect called the Bouba/Kiki effect. Sharpness icons feeling cool, strong and rigid. And Rounded icons means more friendly, easygoing, sensitive and unreliable.
3. Make it Cohessive
Icons is like a language. We speak with simply visual shapes. Each icons is a word that has it’s own meaning. To make a good communications, we must stick to one language. Using unconsistence icon set is like mixing different language in one sentence.
C. Solution
- Research
I’m started to doing some research on others product and create a list or category for the most important icons like Arrow, Page Navigation (Home, Profile, etc), History pages, Category icons, etc. After that I define the most essential icon on categories.
2. Ideation
After doing some research, I started to look other references based on several word at the list. Then playing with a pencil and paper to create a simple sketch of it. It will make you faster when vectorize it.
3. Vectorize on Adobe Illustrator
Then, I’m started to vectorize it on adobe illustrator. To make it cohessive, I use guidelines from material.io on 24px artboard. I Create it from making stroke and expand it to one union shapes. At this case, I make line and solid icons. And then export to SVG before import it to sketch app.
4. Import and organize it on sketch app
After all, we need to import it on sketch app. I Use sketch icons plugin when doing that. You can found this plugin at sketchicons.com. This plugin can automatically symbolize the icons. At this plugin, you also can resize the icons based on your needs. Then you can organizing the icons with sketch plugin called rename it. And then you can use a sketch files as a library.
I prepare to create a video tutorial on my youtube channel soon. Nice to hear your feedback. Thanks for reading this article!.
