# 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.
```html
```
## Accessibility
Icons ship with a localized descriptive ``.
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` | `"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`
- Default: `"medium"`