Usage

Overview

The Thrive Design System uses Material Design Icons via the react-icons/md package as its primary icon set. These icons are used throughout components for actions, navigation, status indicators, and visual cues.

• Icons provide visual anchors that help users quickly scan and understand interface elements.
• All icons are rendered as inline SVGs for crisp rendering at any size.
• Icons inherit the current text color by default, making them easy to theme.

Icon Sources

Custom Product Icons

The design system includes a set of custom product icons for Thrive-specific features:

Best Practices

• Use icons consistently across similar actions and contexts.
• Pair icons with text labels when the icon meaning may be ambiguous.
• Use the Icon wrapper component for consistent sizing and alignment.
• Maintain a 1:1 aspect ratio for all icons.
• Use semantic color tokens for icon colors (e.g., text-icon, text-icon-primary).

When Not to Use

• Avoid decorative icons that add no meaning or context.
• Don't use icons as the sole means of conveying critical information without accessible text alternatives.
• Don't mix icon sets inconsistently within the same interface section.

Sizing

Icons follow a consistent sizing scale that aligns with the component size system:

Color

Icons use semantic color tokens to ensure proper contrast and meaning:

Accessibility

• Always provide aria-label or aria-hidden="true" on icon elements.
• Icons used as interactive elements (icon buttons) must have accessible names.
• Decorative icons should be hidden from screen readers with aria-hidden="true".
• Ensure icon color contrast meets WCAG 2.1 AA standards (3:1 ratio for non-text elements).