The best practices for icon design
After extensive research, learning, guidance, trial, and error, I have arrived at what I consider the best real-time case study for icon creation. I’ve reviewed numerous case studies and explored the work of designers from other design systems.
Finally, I want to share how I create icons, the methods I employ, and the aspects I take into account while avoiding others. This represents my personal approach to icon design, which may differ from your perspective. I’m open to further discussion and collaboration on this topicEnter your text here...
The main purpose of an icon is to provide users with a straightforward way to understand a context. Icons are incredibly helpful for this, enabling users to gain a clear understanding and take quick action.
They facilitate a rapid visual conversation, so users don’t need to read lengthy text; a single glance is often sufficient for comprehension. Icons have the power to convey information to users without requiring them to read, making it vital for icons to be very clear in their intended message to users.
Things should be considered while creating iconsCertain considerations should be kept in mind when creating icons. These factors contribute to making icons more polished and refined. Aspects such as grid alignment, spacing, stroke size, breathing space, and the gaps between objects play a significant role in defining the clarity and enhancement of icons.
Spacing and gaps
We allocate 1 pixel of space around the construction area to allow breathing room. Each individual small box we observe occupies one pixel, forming the basis for constructing our icons.
Stroke: Additionally, we adhere to a 1-pixel stroke, aligning precisely with the dimensions of a single-pixel box.
Gap: The gap we define here pertains to maintaining a minimum 1-pixel distance between two objects when they meet or overlap.
Angle
When designing an icon, if you need to use an angled orientation, it’s a good idea to favour a 45-degree angle. However, in cases where this angle doesn’t work well, it’s important to choose the angle that best suits the icon’s requirements.
Scaling
This discussion mainly focuses on how to scale icons for different sizes effectively. For instance, when a designer is asked to create a 32x32 pixel icon, there’s a recommended approach to follow. Instead of starting directly with the 32x32 size, it’s better for the Visual Designer to begin with a 16x16 size.
This aligns with the 16x16 pixel grid, making it easier to create icons. It not only simplifies the design process but also ensures that the icons follow our gap rules and stroke size standards.
Round Corners
The corner radius is an essential element to consider when creating icons. There are certain principles to maintain the corner radius accurately. Even when you scale the icon or elements created based on the 16x16 grid, the radius will scale proportionately.
This screen explains the concept of radius corner propositions very effectively. If the radius is not maintained properly, the result will not be as compact and elegant as we expect. It might compromise the elegance of the icon design.
Managing the Icon Library
Once VD finishes the icon 16X16 size, VD has to convert or scale to the various sizes defined in Iconography.
Stroke sizes
When we scale icons to specific sizes, they should automatically adjust to those sizes. It’s important to ensure that when you increase the icon size, it maintains the stroke sizes as specified. If the strokes do not meet the required size, we should carefully inspect the icons to make necessary adjustments.
Hedge Cases
There are some edge cases where we can’t follow the guidelines and rules we emphasized above. Stroke won’t always fit perfectly into pixel boxes. Here, I’ll provide some references to elaborate on these situations.
In the first case, I wanted to align two lines in the centre of a circle. This alignment would help me fit them neatly into a grid, ensuring precise management of pixel gaps and spacing.
In the second scenario, we have three vertical lines surrounding a circle. Similar to the previous case, my goal was to align these three lines with the centre of the circle. However, if I center-align them with the circle, they won’t fit perfectly within the grid. Each line will occupy 0.5 pixels on both the left and right sides of the pixel box.
Despite not conforming to the strict pixel grid, there is a 1-pixel spacing between them. I hope this clarifies the situations you described.
Tool Setting Guide
Before scaling icons to different sizes, there are a few settings that should be enabled in Adobe preferences. Enabling these settings ensures that icons scale proportionately and with precision. Furthermore, these settings support a pixel-perfect approach, reducing the chances of pixel glitches and making it a valuable practice.