Icon
Symbols for common actions and objects
Demo
API
Tag
| Name | Description |
|---|---|
<s-icon>
|
Custom HTML tag, no content |
Attributes
| Name | Value | Required | Description |
|---|---|---|---|
name |
See all icons below |
|
Sets the icon |
Properties
| Name | Value | Required | Description |
|---|---|---|---|
name |
See all icons below |
|
Sets the icon |
Classes
| Name | Description |
|---|---|
medium |
Increases the size of the icon (not every icon is available in this size; please check the list below to verify) |
Demo
API
Tag
| Name |
|---|
<SIcon>
|
Props
| Name | Value | Required | Description |
|---|---|---|---|
name |
See all icons below |
|
Sets the icon |
Classes
| Name | Description |
|---|---|
medium |
Increases the size of the icon (not every icon is available in this size; please check the list below to verify) |
Skylab React links
Guidelines
Accessibility
An icon must either be ignored by the screen reader with
aria-hidden="true" or given an accessible label with the alt attribute.
Avoid styling icons
Icons intentionally inherit their styles. This usually meets expectations, but if you determine the inherited style doesn't then use CSS Utils.
Pair with text
Icons should generally be paired with text to minimize ambiguity.
Icon sizes
Icons are available in 2 sizes: small (default) and medium to provide optimal rendering. Some icons are available in only one size. Use the radio buttons in the search tool below to identify available icons by size.
Search
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com