sp-icon

Since: UXP v4.1

Display a named icon.

See:

• https://spectrum.adobe.com/page/icons/
• https://opensource.adobe.com/spectrum-web-components/components/icon

Example

<sp-icon name="ui:Magnifier"></sp-icon>
CopyCopied to your clipboard
<sp-icon name="ui:Magnifier"></sp-icon>

Sizes

Icons can be rendered in various sizes by specifying a T-Shirt size with a size attribute.

<sp-icon size="xxs" name="ui:Magnifier"></sp-icon>
<sp-icon size="xs" name="ui:Magnifier"></sp-icon>
<sp-icon size="s" name="ui:Magnifier"></sp-icon>
<sp-icon size="m" name="ui:Magnifier"></sp-icon>
<sp-icon size="l" name="ui:Magnifier"></sp-icon>
<sp-icon size="xl" name="ui:Magnifier"></sp-icon>
<sp-icon size="xxl" name="ui:Magnifier"></sp-icon>
CopyCopied to your clipboard
1<sp-icon size="xxs" name="ui:Magnifier"></sp-icon>
2<sp-icon size="xs" name="ui:Magnifier"></sp-icon>
3<sp-icon size="s" name="ui:Magnifier"></sp-icon>
4<sp-icon size="m" name="ui:Magnifier"></sp-icon>
5<sp-icon size="l" name="ui:Magnifier"></sp-icon>
6<sp-icon size="xl" name="ui:Magnifier"></sp-icon>
7<sp-icon size="xxl" name="ui:Magnifier"></sp-icon>

Built-in Icons

Spectrum UXP supplies the Spectrum UI icons. They are named as follows:

• AlertMedium
• AlertSmall
• ArrowDownSmall
• ArrowLeftMedium
• ArrowUpSmall
• Asterisk
• CheckmarkMedium
• CheckmarkSmall
• ChevronDownMedium
• ChevronDownSmall
• ChevronLeftLarge
• ChevronLeftMedium
• ChevronRightLarge
• ChevronRightMedium
• ChevronRightSmall
• ChevronUpSmall
• CornerTriangle
• CrossLarge
• CrossMedium
• CrossSmall
• DashSmall
• DoubleGripper
• FolderBreadcrumb
• HelpMedium
• HelpSmall
• InfoMedium
• InfoSmall
• Magnifier
• More
• SkipLeft
• SkipRight
• Star
• StarOutline
• SuccessMedium
• SuccessSmall
• TripleGripper

Last updated 8/10/2021

Was this helpful?

Yes

No