Unit
- Shape contrast: Use both geometric and organic shapes within an icon set to create visual interest, but maintain a consistent stylistic framework. For example, a simple line icon can be paired with a filled circle to indicate a toggle state, relying on shape contrast to communicate function.
- Scalability: Design icons at a base size of 24x24 or 32x32 pixels, using vector tools to ensure crisp rendering at any scale. Avoid complex details that become muddied at smaller sizes; prioritize clarity over decoration.
- Stroke uniformity: Maintain consistent stroke widths across all icons in a set, typically 1.5px to 2px for small icons. This creates visual harmony and prevents some icons from appearing heavier than others.
- Negative space: Balance filled areas with open space to improve legibility. Icons with too much solid fill feel heavy, while those with excessive negative space lack presence. Aim for a 40-60 ratio of positive to negative space.
- Simplification: Reduce icons to their essential meaning by removing non-critical details. A well-simplified icon communicates instantly; overly complex icons require decoding and slow recognition.
- Visual weight: Adjust the size of icons based on their optical weight rather than strict mathematical dimensions. A circular icon may need to be slightly larger than a rectangular one to appear the same size.
- Consistency in style: Decide between filled, outlined, or duo-tone styles at the outset and apply uniformly. Mixing styles within a set creates visual noise and undermines professional quality.
- Contextual appropriateness: Consider where the icon will appear (toolbar, button, notification) and adapt its level of detail accordingly. Icons in a dense toolbar need more simplicity than those on a landing page.
- Timing and easing: Apply easing curves to icon animations to mimic natural motion. A linear animation feels robotic, while an ease-in-out curve creates a polished, organic transition. For micro interactions like a heart like button, use a bounce easing to add playful energy without disrupting the user's flow.
- Pixel alignment: Snap vector points to the pixel grid to prevent anti aliasing blurriness, especially for static states. Crisp edges are critical for sharp rendering on standard screens. For animated elements, allow sub pixel movement to achieve smooth motion, but snap back to whole pixels for the final resting state.
- Modular construction: Build icons using reusable components or layers to speed up iteration and maintain consistency. For example, use a standard folder shape as a base and swap inner symbols for different file types. This approach reduces cognitive load during design and ensures a cohesive visual language across the set.
Design Principle
Principle: Scalability through Grid-Based Design
Definition: A consistent pixel grid (e.g., 24x24) combined with modular construction allows icons to scale from favicon size to billboard size without loss of quality. The grid enforces alignment and spacing rules that maintain visual harmony across all sizes.
Application: When designing a set of 20 icons for a mobile app, place each icon on a 24x24 artboard with 2px padding. Use a 4px grid for stroke widths and corner radii. This ensures that when icons are scaled to 16px for status bars or 48px for splash screens, the proportions remain consistent and the icons retain their intended look.
Quick Revision
- Shape contrast, scalability, stroke uniformity, and negative space are foundational to icon design.
- Grid-based design ensures consistency and scalability across different sizes.
- Simplify icons to their core meaning for instant recognition.
- Maintain visual weight balance and style consistency across the entire set.