sp-icon

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
label label string | undefined
name name string | undefined
size size 's' | 'm' | 'l' | 'xl' | 'xxl' | undefined
src src string | undefined

CSS Custom Properties #

Name Default
--spectrum-alias-ui-icon-arrow-size-100 undefined
--spectrum-alias-ui-icon-arrow-size-200 undefined
--spectrum-alias-ui-icon-arrow-size-300 undefined
--spectrum-alias-ui-icon-arrow-size-400 undefined
--spectrum-alias-ui-icon-arrow-size-500 undefined
--spectrum-alias-ui-icon-arrow-size-600 undefined
--spectrum-alias-ui-icon-arrow-size-75 undefined
--spectrum-alias-ui-icon-asterisk-size-100 var(--spectrum-global-dimension-size-100)
--spectrum-alias-ui-icon-asterisk-size-200 undefined
--spectrum-alias-ui-icon-asterisk-size-300 undefined
--spectrum-alias-ui-icon-asterisk-size-75 var(--spectrum-global-dimension-static-size-100)
--spectrum-alias-ui-icon-checkmark-size-100 undefined
--spectrum-alias-ui-icon-checkmark-size-200 undefined
--spectrum-alias-ui-icon-checkmark-size-300 undefined
--spectrum-alias-ui-icon-checkmark-size-400 undefined
--spectrum-alias-ui-icon-checkmark-size-50 undefined
--spectrum-alias-ui-icon-checkmark-size-500 undefined
--spectrum-alias-ui-icon-checkmark-size-600 undefined
--spectrum-alias-ui-icon-checkmark-size-75 undefined
--spectrum-alias-ui-icon-chevron-size-100 undefined
--spectrum-alias-ui-icon-chevron-size-200 undefined
--spectrum-alias-ui-icon-chevron-size-300 undefined
--spectrum-alias-ui-icon-chevron-size-400 undefined
--spectrum-alias-ui-icon-chevron-size-500 undefined
--spectrum-alias-ui-icon-chevron-size-75 undefined
--spectrum-alias-ui-icon-cornertriangle-size-100 undefined
--spectrum-alias-ui-icon-cornertriangle-size-200 var(--spectrum-global-dimension-size-75)
--spectrum-alias-ui-icon-cornertriangle-size-300 undefined
--spectrum-alias-ui-icon-cornertriangle-size-75 var(--spectrum-global-dimension-size-65)
--spectrum-alias-ui-icon-cross-size-100 undefined
--spectrum-alias-ui-icon-cross-size-200 undefined
--spectrum-alias-ui-icon-cross-size-300 undefined
--spectrum-alias-ui-icon-cross-size-400 undefined
--spectrum-alias-ui-icon-cross-size-500 undefined
--spectrum-alias-ui-icon-cross-size-600 undefined
--spectrum-alias-ui-icon-cross-size-75 undefined
--spectrum-alias-ui-icon-dash-size-100 undefined
--spectrum-alias-ui-icon-dash-size-200 undefined
--spectrum-alias-ui-icon-dash-size-300 undefined
--spectrum-alias-ui-icon-dash-size-400 undefined
--spectrum-alias-ui-icon-dash-size-50 undefined
--spectrum-alias-ui-icon-dash-size-500 undefined
--spectrum-alias-ui-icon-dash-size-600 undefined
--spectrum-alias-ui-icon-dash-size-75 undefined
--spectrum-alias-ui-icon-doublegripper-size-100-height undefined
--spectrum-alias-ui-icon-doublegripper-size-100-width var(--spectrum-global-dimension-size-200)
--spectrum-alias-ui-icon-singlegripper-size-100-height undefined
--spectrum-alias-ui-icon-singlegripper-size-100-width var(--spectrum-global-dimension-size-300)
--spectrum-alias-ui-icon-triplegripper-size-100-height var(--spectrum-global-dimension-size-100)
--spectrum-alias-ui-icon-triplegripper-size-100-width undefined
--spectrum-alias-workflow-icon-size-l undefined
--spectrum-alias-workflow-icon-size-m var(--spectrum-global-dimension-size-225)
--spectrum-alias-workflow-icon-size-s var(--spectrum-global-dimension-size-200)
--spectrum-alias-workflow-icon-size-xl var(--spectrum-global-dimension-size-275)

Description #

<sp-icon> renders an icon to the page. By default the name attribute will pair with separately registered icon sets to deliver the icons. When not present, <sp-icon> will subsequently check for its src attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.

Usage #

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/icon

Import the side effectful registration of <sp-icon> via:

import '@spectrum-web-components/icon/sp-icon.js';

When looking to leverage the Icon base class as a type and/or for extension purposes, do so via:

import { Icon } from '@spectrum-web-components/icon';

Example #

Names icons on this page are provided by the <sp-icons-medium> icon set. Learn how to create your own via sp-iconset.

<sp-icons-medium></sp-icons-medium>
<sp-icon name="ui:Arrow100"></sp-icon>

Variants #

Icons are available in various sizes in Spectrum ranging from s to xxl. By default an sp-icon without a size attribute will appear as if it were size="m". We can specify the size via size attribute.

Size variants #

<sp-icon size="s" name="ui:Arrow100"></sp-icon>
<sp-icon size="m" name="ui:Arrow100"></sp-icon>
<sp-icon size="l" name="ui:Arrow100"></sp-icon>
<sp-icon size="xl" name="ui:Arrow100"></sp-icon>
<sp-icon size="xxl" name="ui:Arrow100"></sp-icon>

Color icon #

Icons apply their color as currentColor so change the color property of the element for customization.

<sp-icon name="ui:Arrow100" style="color: red;"></sp-icon>

Image icon #

An image icon can be supplied via the src attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriately prepared for including in your applications design requirements.

<sp-icon
size="s"
label="Previous"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
>
</sp-icon>
<sp-icon
size="m"
label="Previous"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
>
</sp-icon>
<sp-icon
size="l"
label="Previous"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
>
</sp-icon>
<sp-icon
size="xl"
label="Previous"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
>
</sp-icon>
<sp-icon
size="xxl"
label="Previous"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
>
</sp-icon>

Element icon #

Icons can also be supplied as HTML elements to be applied via the default <slot>.

<sp-icon size="s">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 22 22"
role="img"
fill="currentColor"
height="18"
width="18"
aria-hidden="true"
>

<path
d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
>
</path>
</svg>
</sp-icon>
<sp-icon>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 22 22"
role="img"
fill="currentColor"
height="18"
width="18"
aria-hidden="true"
>

<path
d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
>
</path>
</svg>
</sp-icon>
<sp-icon size="xxl">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 22 22"
role="img"
fill="currentColor"
height="18"
width="18"
aria-hidden="true"
>

<path
d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
>
</path>
</svg>
</sp-icon>

Accessibility #

aria-hidden is set to true by default for Icons. The label attribute suppresses this and adds the label text as the aria-label of the icon.

<sp-icon name="ui:Arrow100" label="Arrow pointing to the right"></sp-icon>