Icons can be used as accents to support the topic and ideas being presented.

The specifications in this section refer to Material Design icons

On occasion, you may need to develop custom icons for special cases. Implement these icons in the code as SVGs, which allows for smooth and responsive resizing.

• Align icon names with their intended use (e.g., "expand-more" for expanding drawers).
• Pair icons with text labels when possible.
• Enhance content with icons without causing distraction.
• Maintain consistency in icon usage across designs.
• Adhere to sizing and spacing guidelines for uniformity.

• Use small icons in small buttons and dropdown menus.
• Use medium icons in medium buttons, navigation, and toolbars.
• Use large icons in toolbars and show/hide menus.

• Avoid using icons without a clear communicative purpose.
• Do not use icons that distract from the main content.

• Sizes: Small, Medium, Large.
• Order and Alignment:
  • Align supportive icons to the left.
  • Align action-oriented icons to the right.
• Spacing:
  • Place 24px icons on a 48px touch surface.
  • Allow 24px between icons and 8px between an icon and its label.

• Tooltip Rules: Icons without a supporting label should include a tooltip.

• Ensure icons are clickable and touch-friendly by following spacing guidelines.

• Make icons instantly perceivable; otherwise, they become inaccessible.
• Add ALT text for linked icons; decorative icons should not have ALT text.
• Always include a text label.
• Follow color guidelines for proper contrast.
• Do not resize icons past their minimum size.
• Include aria-hidden="true" for all icons.

• Alerts
• Modals
• Popovers