# Icon (w-icon)

## Description

[Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)

## Usage

See the [Icons overview](https://warp-ds.github.io/docs/components/icons/overview) for a list of available icons. Icon names are case sensitive.

<elements-example>

```html
<w-icon name="Rocket"></w-icon>
```

</elements-example>

## Accessibility

Icons ship with a localized descriptive `<title>`.

Note that the description is about the icon itself, not its semantic meaning in every given context. If you for example make an icon button, make sure to include an `aria-label` on your button that describes its action.

## Examples

### Small

<elements-example>

```html
<w-icon name="Rocket" size="small"></w-icon>
```

</elements-example>

### Medium

This is the default size.

<elements-example>

```html
<w-icon name="Rocket" size="medium"></w-icon>
```

</elements-example>

### Large

<elements-example>

```html
<w-icon name="Rocket" size="large"></w-icon>
```

</elements-example>

### Custom size

You can set a pixel size as well if none of the presets fit your needs.

<elements-example>

```html
<w-icon name="Rocket" size="13.37px"></w-icon>
```

</elements-example>

## Styling API

## `<w-icon>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| locale | `string` | `-` | Locale used for `<title>` text. |
| name | `string` | `-` | Icon filename (without .svg) |
| size | [`"small" \| "medium" \| "large" \| PixelValue \| undefined`](#small-medium-large-pixelvalue-undefined) | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |

### Property Details

#### locale

Locale used for `<title>` text.

Reads the `lang` attribute from `<html>`, falls back to 'en'.

- Type: `string`
- Default: `-`

#### name

Icon filename (without .svg)

- Type: `string`
- Default: `-`

#### size

Size: small, medium, large or pixel value (e.g. "32px").

- Type: [`"small" | "medium" | "large" | PixelValue | undefined`](#small-medium-large-pixelvalue-undefined)
- Default: `"medium"`

### Types

#### "small" | "medium" | "large" | PixelValue | undefined

`'small' | 'medium' | 'large' | `${number}px` | undefined`

