Define the style, usage, and implementation of icons across Tendoo products for clarity and consistency.

Iconography

Icons enhance communication in UI by representing actions, objects, and ideas with visual clarity. The Tendoo Design System uses a unified icon style and consistent rules for implementation to ensure accessibility, clarity, and brand cohesion.

Icon Principles

Clarity — Icons must be easy to understand at a glance.
Consistency — Use a single icon set and consistent sizing.
Simplicity — Icons should be visually minimal and not overly detailed.
Accessibility — All icons must support screen readers when necessary.

Icon Style

Stroke-based with a consistent thickness (1.5px–2px)
Geometric and minimal for clarity at small sizes
Aligned to a 24×24 grid
Designed to scale cleanly in both web and mobile UIs

Sizes

Token	Size	Usage
`icon.sm`	`16px`	Buttons, small UI controls
`icon.md`	`20px`	Default icon size
`icon.lg`	`24px`	Headers, empty states
`icon.xl`	`32px`	Large cards, hero sections

// icon.tokens.ts
export const icon = {
  sm: "16px",
  md: "20px",
  lg: "24px",
  xl: "32px",
};

Usage Guidelines

Use icon.md (20px) as the default.
Align icons vertically with adjacent text using inline-flex and items-center.
Maintain consistent spacing: typically 4px–8px between icon and label.
Wrap icons with aria-hidden="true" if purely decorative.
Add aria-label or title for meaningful/actionable icons.

Example

<button className="inline-flex items-center gap-2">
  <Icon name="plus" size="md" />
  <span>Create</span>
</button>

Icon Library

We recommend using the Lucide icon set — an open-source, consistent, and developer-friendly collection.

Tip: Only use icons from the official set to avoid visual clashes or inconsistent design.

Icons are more than decoration — they’re functional elements that support understanding and enhance the user experience. Use them sparingly, accessibly, and consistently.

Iconography

On this page