At work, I recently took on a large-scale icon design project that unfolded over several months. The objective was clear: craft a cohesive, modernized icon set that seamlessly aligned with our updated brand standards. These icons weren’t just for show—they were destined for our digital design system, ready to be used across web and app projects. Through this process, I discovered just how much thought and precision goes into designing icons that are not only visually appealing but also practical and adaptable. Let’s dive into the steps we took to bring this icon set to life!
Download your free icon grid and practice files for this tutorial.
The Design Tools: Illustrator vs. Figma
Initially, we used Adobe Illustrator to design the icons, leveraging its robust vector tools and familiarity. However, we discovered that exporting icons to Figma introduced slight dimensional distortions (e.g., 18.01px instead of 18px). Given the need for pixel-perfect accuracy, we recommend designing directly in Figma to avoid these transfer issues.
Grid and Key Shapes
We based our icons on the Material Design grid, which includes key shapes to maintain visual balance. Here’s how we handled the grid system:
- Base grid: 24px with a 1.5px stroke width.
- Minimum size: Icons aim to be at least 20px high or wide.
- Corner radii: 2px for larger elements, 0.5px for smaller ones.
This structure helps ensure icons feel cohesive, even when depicting vastly different concepts.
Consistency Rules
We established several rules to maintain uniformity across the set:
- Pixel-perfect dimensions: Every icon had to snap perfectly to the grid to avoid blurry edges, especially at small sizes.
- Unionizing shapes: After designing, we used Figma’s “Union Selection” to merge complex shapes, simplifying layer management and improving scalability.
- Centered alignment: We double-checked that icons were perfectly centered within their bounding boxes to prevent misalignment in UI applications.
Icon Variations
To accommodate different design needs, we created three icon versions:
- Standalone icon: Designed on a 24px grid.
- Icon with outline bar: Fits within a 32px frame.
- Filled icon in a box: Also on a 32px grid, with the outline placed inside the box.
These variations offer flexibility, whether the icon stands alone or integrates with other UI elements.
Learning Through Iteration
Some icons required exceptions. For instance, a cup icon’s straw extended slightly beyond the grid to maintain proper spacing. These adjustments were made carefully, balancing aesthetic needs with the grid system.
Final Export and Tokenization
Once designs were complete:
- Export as SVG: Icons were exported as scalable vectors.
- Validate dimensions: We manually checked dimensions in Figma to ensure accuracy.
- Tokenize in the design system: Icons were integrated into the design system for easy reuse.
Takeaways
Our icon design process evolved through trial and error, revealing the nuances of tool compatibility and the importance of grid discipline. By sticking with Figma, enforcing strict size rules, and meticulously testing each export, we built an icon set that’s not only beautiful but also functional.
Whether you’re starting your first icon set or refining an existing one, we hope these insights help streamline your process. Happy designing!