Skip to main content

🖼️ Icons

Sizing​

  • UI default (e.g., 24px); inline text icons (e.g., 16px).
  • Align to pixel grid for sharp rendering.

Naming & Organization​

  • Consistent token/asset naming (e.g., icon.name.size).
  • Prefer outlined/filled sets consistently per context.

Color & Contrast​

  • Bind icon color via semantic tokens (e.g., color.icon.default).
  • Ensure sufficient contrast in all themes.

Usage​

  • Don’t stretch or distort.
  • Maintain clear touch target when tappable (e.g., ≥44px).