Icons & Visuals
Icon Style
Consistency is key; use a unified style (e.g., line, filled, flat, or outlined) to ensure visual harmony. Keep icons minimalistic with clean lines for easy recognition and scalability. Icons should be vector-based (SVG format) to maintain clarity at various sizes. Match the icon style to the brand’s tone (e.g., modern for tech brands, classic for traditional sectors). Entities have the option to use their own custom icons or to choose Material Icons, which we recommend as a standard option.
Icon Sizes
Define standard sizes for specific use cases. Small: 16x16px, ideal for dense UI elements like toolbars or status indicators. Medium: 24x24px, suitable for navigation icons or primary action buttons. Large: 32x32px, best for prominent areas, such as section headers or feature icons. Use increments that maintain balance and proportion, ensuring readability and clarity at each size.
Color and Tone
Use primary or secondary brand colors consistently in icons, reserving additional colors for emphasis or interactive states (e.g., hover, active). Ensure contrast for visibility, especially for overlays on different backgrounds, and meet WCAG color contrast guidelines. Assign distinct colors for icons representing specific categories (e.g., health, transportation) to aid quick recognition.
Spacing and Placement
Maintain equal padding around each icon to ensure visual balance. Icons should align consistently within the grid or layout, respecting margins and other visual elements. Group related icons to indicate relationships, with consistent spacing to improve readability.
Icon Usage
Use icons that intuitively convey their function or category (e.g., a heart for health, a bus for transportation). Use icons selectively to avoid visual clutter, reserving them for interactive elements, navigation, or key content indicators. Accompany icons with labels where necessary, especially when the icon alone may not be universally understood.
Visuals for Illustrations and Enhancements
Use purpose-driven illustrations that directly enhance content, like simple illustrations for explanatory text, or visuals that align with the subject matter (e.g., scenic illustrations for tourism). Consider overlay icons to provide additional context (e.g., a pin overlay on a map icon for location-based services). Visuals should reflect the brand’s tone, whether dynamic, professional, or friendly.
Accessibility Considerations
To ensure accessibility, icons should include alt text if they convey essential information, while purely decorative icons should be marked to be ignored by screen readers. Icons must meet a minimum contrast ratio of 3:1 and should not rely on color alone for meaning, supporting users with low vision or color blindness. Consistent icon usage reduces cognitive load, making it easier for users to recognize functions at a glance. For complex icons, adding text labels or accessible names helps clarify their purpose, especially for screen reader users.
Icons should be responsive, scaling smoothly for readability up to 200% and adapting across devices. These best practices ensure icons are clear, usable, and accessible for everyone.
References
Last updated