Image by Paul Stomma
Icon design is always a balance between clarity, simplicity, and visual appeal. This article shares key practical UX and UI recommendations to help guide the icon design process.
https://medium.com/media/c086e5f887746457f24b56966d04cbf0/href
UX design recommendations
Functionality. Use icons to enhance usability, not for decoration.Simplicity is key. Icons should be easy to understand at a glance, even at smaller sizes. Avoid unnecessary details that could make the icon hard to recognize.Uniform style. Use a consistent style across all icons, such as stroke weight, color scheme, and corner rounding. This helps build a cohesive look and feel.Avoid ambiguity. Be cautious of icons that may be misinterpreted. Test them with users to ensure they can easily understand the meaning of icons.Readable at small sizes. Test icons at different sizes to make sure they retain their clarity and are easily recognizable.
UI design recommendations
Always align objects to the pixel grid to stay consistent
Use 8-pixel as the basic unit for your grid. This will ensure consistency and balance of icons you create for different mediums.
When you choose 8px as the basic unit, you will create an easily scalable grid. Image by Vitsky.
Create icons for viewing at 100% scale for pixel-perfect accuracy
It will help you design pixel-perfect icons.
100% scale (default) vs 1000% (zoom-in). Image by Material Design.
Design icons in 3 different sizes
16 x 16 px. Commonly used for smaller elements like status indicators or compact toolbars.24 x 24 px. Standard size for most modern web and mobile apps; it’s large enough to allow for detail, while still small enough to fit comfortably within UI elements32 x 32 px. Size is used for larger UI elements, such as desktop toolbar icons or touch targets in mobile apps, where you want the icon to be more prominent.Different size of icons (from small to x-large). Image by Nick Babich.
Use consistent stroke width
The stroke width should be consistent across your icon set to maintain a uniform visual style.
2px stroke width for icon. Image by Material Design.Setting stroke width in Figma for icon element. Image by Nick Babich.
Design icon within a live area
For the optical grid, add vertical & horizontal padding = stroke weight. It will allow the creation of a live area. Icon content should remain inside of the live area.
Icon live area is limited to the 20dp x 20dp, with 2dp of padding around the perimeter. Image by Material Design.Icon is positioned in a live area. Image by Nick Babich.
Choose proper border radius for icons
16 x 16 pixel icons: 1–2 pixel radius is typically appropriate for smaller icons to avoid overly rounding them, which could make them look less sharp.24 x 24 px icons: 2–4 pixel border radius is commonly used for rounded corners. This provides a subtle roundness without compromising the clarity of the icon’s shape.32 x 32 pixel icons and larger: 4–6 pixel border radius works well for larger icons to give them a more pronounced rounded effect.
Platform specific for corner radius
iOS (Human Interface Guidelines): Icons often use a slightly larger radius for a more fluid design. A border radius of 4px for a 24×24 icon is commonly seen in iOS designs.Android (Material Design): Typically follows a more angular and sharp approach, so the radius is often smaller, around 2px for a 24×24 icon.
Use a keyline (key shapes) when designing complex icons
Keyline is a combination of simple geometric objects — ellipse, square, and two rectangles — that make it easier to achieve visual balance when positioning individual elements of the icon.
Simple grid and grid with keyline. Image by Material Design.Using a keyline for mail icon. Image by Nick Babich.
Simplify small icons
When working with 16px icons, reduce the level of detail to maintain clarity. It’s okay to add more detail for larger icons, but ensure consistency in the overall style.
Simplify small icons to maintain clarity. Image by Streamline.
Match the style of the icons to the typeface
If your typeface is geometric (like Helvetica or Roboto), your icons should have geometric shapes and sharp edges. If your typeface has a more organic, humanistic feel (like Avenir or Gotham), your icons should have smoother curves and a softer aesthetic.
Match between icon style and typeface. Image by Streamline.
Want to master your UI design skills?
Whether you’ve been working as a designer for years or are completely new to design, Designlab has programs and courses to help you take the next step in your design career. Check Advanced Figma courses to master your UI design skills.
Online UI and UX Design Courses and Bootcamps | Designlab
This post contains affiliate link(s)
Practical Guide To Icon Design was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.