@marioschmidt/design-system-icons-react

> BILD Design System | React icon components with TypeScript support


---

Installation

``bash
npm install @marioschmidt/design-system-icons-react
`

Peer Dependencies:
- React 18+

---

Usage

$3

`tsx
import { IconAdd, IconMenu, IconSearch } from '@marioschmidt/design-system-icons-react';

function App() {
return (



);
}
`

$3

`tsx
import { IconAdd } from '@marioschmidt/design-system-icons-react/IconAdd';
import IconMenu from '@marioschmidt/design-system-icons-react/IconMenu';
`

---

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | number \| string | 24 | Icon size in pixels |
| color | string | currentColor | Icon color |
| aria-label | string | – | Accessible label (makes icon visible to screen readers) |
| title | string | – | SVG title element (tooltip) |
| className | string | – | CSS class name |
| style | CSSProperties | – | Inline styles |

---

Accessibility

$3

By default, icons are hidden from screen readers:

`tsx

// Renders:
`

$3

Add aria-label for icons that convey meaning:

`tsx

// Renders:
`

$3

`tsx

// Renders:
`

---

Styling

$3

Icons use currentColor and inherit the parent's text color:

`tsx



`

$3

`tsx

`

$3

`tsx

`

---

TypeScript

Full TypeScript support with auto-completion:

`tsx
import { IconAdd, type IconProps } from '@marioschmidt/design-system-icons-react';

const MyIcon: React.FC = (props) => ;
`

---

Icon List

See the full icon catalog in the main icons documentation.

---

Related Packages

| Package | Purpose |
|---------|---------|
| @marioschmidt/design-system-icons | Raw SVG files |
| de.bild.design:icons | Android Vector Drawables |
| BildIcons` | iOS Swift Package |

---

License

MIT