---
title: Icon
description: Icons are visual elements that represent actions, objects, or concepts.
category: Display
related: [Button, Badge, Text]
commonPatterns: [icon-button, icon-with-text, status-icon]
---

Source: https://clickhouse.design/click-ui/icon

# Icon

Icons are visual elements that represent actions, objects, or concepts. They provide visual context and help users quickly understand interface elements.

## Example

## Props

| Prop   | Type                                                        | Default value    | Description                                                                                                  |
| ------ | ----------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------ |
| name   | `IconName`                                                  | `""`             | Name of the icon to display. See Icon Library for available icons.                                           |
| size   | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"`             | `"md"`           | Size variant of the icon using predefined size tokens                                                        |
| color  | `string`                                                    | `"currentColor"` | Color of the icon. Can be a CSS color value (e.g., "red", "#FF0000") or "currentColor" to inherit text color |
| state  | `"default" \| "success" \| "warning" \| "danger" \| "info"` | `"default"`      | Visual state variant that applies semantic color styling to the icon                                         |
| width  | `number \| string`                                          | `undefined`      | Custom width for the icon (e.g., 24, "24px"). Overrides size when specified.                                 |
| height | `number \| string`                                          | `undefined`      | Custom height for the icon (e.g., 24, "24px"). Overrides size when specified.                                |

```tsx
import { Icon } from '@clickhouse/click-ui'

<Icon 
name="check"
size="md"
/>
```

## Quick start

```tsx
import { Icon } from '@clickhouse/click-ui'

function MyIcon() {
return (
  <Icon name="check" size="md" />
)
}
```

## Related components

- **Button**: Icons are commonly used within buttons.
- **Badge**: Icons can be displayed within badges.
- **Text**: Icons are often paired with text for context.

## Common use cases

### Icon with Text

```tsx
import { Icon, Text, Container } from '@clickhouse/click-ui'

function IconWithText() {
return (
  <Container orientation='horizontal' gap='sm' alignItems='center'>
    <Icon name="check" size="sm" state="success" />
    <Text>Task completed</Text>
  </Container>
)
}
```

### Status icon

```tsx
import { Icon, Text, Container } from '@clickhouse/click-ui'

function StatusIcon() {
return (
  <Container orientation='horizontal' gap='xs' alignItems='center'>
    <Icon name="check-in-circle" size="sm" state="success" />
    <Text size='sm'>Success</Text>
  </Container>
)
}
```

### Different sizes

```tsx
import { Icon, Container } from '@clickhouse/click-ui'

function IconSizes() {
return (
  <Container orientation='horizontal' gap='md'>
    <Icon name="check" size="xs" />
    <Icon name="check" size="sm" />
    <Icon name="check" size="md" />
  </Container>
)
}
```

### States