# Icon (/docs/products/dash-dots/reference/components/icon)

The full list of names is on the [components overview](/docs/products/dash-dots/reference/components#icon-names).

**Children:** Nothing · **Inline:** can sit within a line of text, inside a `Text`

## Example

![The Icon component](/assets/images/dash-dots/components/icon.webp)

```xml title="view.dml"
<View direction="row" gap="medium">
  <Icon name="home" />
  <Icon name="wallet" tone="info" />
  <Icon name="success" tone="success" />
  <Icon name="warning" tone="warning" />
</View>
```

## Props

| Prop   | Type                                                                                                                                                          | What it is          |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `name` | [icon name](/docs/products/dash-dots/reference/components#icon-names), or one of [your own icons](/docs/products/dash-dots/developers/theming#your-own-icons) |                     |
| `size` | [size](/docs/products/dash-dots/reference/components#sizes)                                                                                                   | Default: `medium`.  |
| `tone` | [text tone](/docs/products/dash-dots/reference/components#text-tones), or a [custom color](/docs/products/dash-dots/developers/theming#custom-colors)         | Default: `default`. |

## Events

None.