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 |
|---|---|
xsmall |
Decreases the size of the icon (not every icon is available in this size; please check the list below to verify) |
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 |
|---|---|
xsmall |
Decreases the size of the icon (not every icon is available in this size; please check the list below to verify) |
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
<s-icon> defaults to aria-hidden="true", since most icons are decorative and
are paired with visible text or an accessible label elsewhere (for example, an icon inside a button that
already has an aria-label). Consumers do not need to set aria-hidden="true"
themselves.
If an icon needs to be accessible on its own (for example, the only content of an icon-only button with no
other label), override the default by setting an aria-label (or aria-labelledby)
directly on the <s-icon> element. Setting either attribute keeps the icon exposed to
assistive tech; aria-hidden can also be set to "false" explicitly if needed.
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 3 sizes: xsmall, 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