Skip to main content

@ttoss/react-icons

Access 200,000+ open source icons through Iconify with seamless @ttoss/ui integration.

Installation​

pnpm add @ttoss/react-icons

Quick Start​

import { Icon } from '@ttoss/react-icons';

// Basic usage
<Icon icon="mdi:home" width={24} />

// With theme colors
<Box sx={{ color: 'primary' }}>
  <Icon icon="heroicons:heart-solid" width={32} />
</Box>

Finding Icons​

Browse and search 200,000+ icons from popular sets:

  • Material Design: mdi:home, mdi:user
  • Heroicons: heroicons:heart-solid
  • Tabler: tabler:settings
  • Feather: feather:search
  • Bootstrap: bi:github
  • Font Awesome: fa-solid:arrow-right

Custom Icons​

Add your own SVG icons using addIcon:

import { addIcon, Icon } from '@ttoss/react-icons';

// Register once (e.g., in app initialization)
addIcon('company-logo', {
  body: '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>',
  width: 24,
  height: 24,
});

// Use anywhere
<Icon icon="company-logo" width={32} />;

API​

Icon Props​

interface IconProps {
  icon: string; // Icon name (e.g., "mdi:home")
  width?: number | string; // Size (default: 1em)
  height?: number | string; // Height (defaults to width)
  color?: string; // Override color
  rotate?: number; // Rotation degrees
  flip?: 'horizontal' | 'vertical';
}

IconType​

interface IconType {
  body: string; // SVG content (without <svg> wrapper)
  width?: number; // Default width
  height?: number; // Default height
  viewBox?: string; // SVG viewBox
}

Theme Integration​

Icons inherit color from parent theme context:

// Inherits primary color
<Box sx={{ color: 'primary' }}>
  <Icon icon="mdi:star" width={24} />
</Box>

// Inherits error color
<Text sx={{ color: 'error' }}>
  <Icon icon="mdi:alert" width={16} />
  Error message
</Text>

Responsive sizing:

<Icon icon="mdi:menu" width={[16, 20, 24]} />

Performance​

  • On-demand loading: Only requested icons are bundled
  • SVG rendering: Direct SVG for optimal performance
  • No network requests: Icons embedded in bundle
  • Tree-shakeable: Unused icons eliminated automatically

TypeScript​

Full type safety with IconType for custom icons and all props:

import type { IconType, IconProps } from '@ttoss/react-icons';

const myIcon: IconType = {
  body: '<path d="..." />',
  width: 24,
  height: 24,
};

Resources​