Icons - Elements ​
Warp’s icons are crafted to deliver consistency, clarity, and scalability across our multi-brand product ecosystem.
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.
Usage ​
See the Icons overview for a list of available icons. Icon names are case sensitive.
<w-icon name="Rocket"></w-icon>Examples ​
Small ​
<w-icon name="Rocket" size="small"></w-icon>Medium ​
This is the default size.
<w-icon name="Rocket" size="medium"></w-icon>Large ​
<w-icon name="Rocket" size="large"></w-icon>Custom size ​
You can set a pixel size as well if none of the presets fit your needs.
<w-icon name="Rocket" size="13.37px"></w-icon><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' | string | "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' | string - Default:
"medium"
Questions? ​
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system