Icons are visual symbols used to represent actions, objects, or concepts within the interface. They enhance recognition, reduce text clutter, and help users quickly identify functionality.
Usage Guidance
Section titled “Usage Guidance”When to Use
Section titled “When to Use”- To visually represent common actions (e.g., edit, delete, add).
- To supplement or replace text where the meaning is universally recognizable.
- To improve scannability and support quick recognition in dense interfaces.
- To provide additional context next to text labels or buttons.
When to Use Something Else
Section titled “When to Use Something Else”- Use text labels instead of icons when the action’s meaning might be unclear.
- Use illustrations for large, expressive visuals that communicate broader ideas.
- Avoid decorative or purely aesthetic icons that add no functional value.
Do’s & Don’ts
Section titled “Do’s & Don’ts”Do
- Use icons from the approved PDS icon library for consistency.
- Pair icons with labels when clarity might be needed (e.g., complex or uncommon actions).
- Align icons to pixel grids for sharp rendering.
- Apply color tokens and size tokens to maintain visual harmony.
- Use filled or outlined variants consistently within the same context.
Don't
- Create or modify custom icons outside of the approved library.
- Use icons without sufficient contrast against the background.
- Use ambiguous icons that require users to guess their meaning.
- Add decorative icons that do not serve a purpose or aid comprehension.
Accessibility Guidelines
Section titled “Accessibility Guidelines”- Provide accessible labels for all interactive icons using
aria-labeloraria-labelledby. - Icons should never rely on color alone to convey meaning; pair with text or use shape differences.
- Ensure icons meet minimum contrast requirements (3:1) against their background.
- If an icon is purely decorative, hide it from assistive technology using
aria-hidden="true". - Maintain consistent size and spacing so icons do not disrupt keyboard focus order or layout.
Content Guidelines
Section titled “Content Guidelines”- Use icons that are easily recognizable and consistent across contexts.
- Pair with short, action-oriented text labels when needed (e.g., Edit, Download).
- Follow consistent casing and alignment when used with text.
- Avoid using multiple icons for the same concept.