Icons Small, portable graphics that provide clarity

The icon component renders an icon from the Resonance icon system. The Resonance icon system is a monoweight library based on the Streamline set of icons.

Usage guidelines
Variations
Attributes
API
History

<res-icon> examples

Usage guidelines

When to use

Icons provide visual cues that help with navigation and clarify the meaning of an interface.

How to use

Icons should have one specific, consistent, and clear meaning. Be consistent with how you use icons—both within a specific application and across the platform. If an icon has an assigned meaning, don’t repurpose it in a different context.
Icons may be used alone or, preferably, paired with text. Put the text to the left of the icon which it labels. Only use an icon on its own when it is readily understandable and familiar to most people using your app.

How to add a new icon

In Sketch, icons are created on an 18x18 canvas and are usually 14px at their largest dimension. It is important to retain this canvas size for consistency. The simplest way is to start from an existing icon file.
Keep in mind that if your new icon is not centered on the canvas, it will not be vertically centered in relation to elements next to it.
Once you have a new .svg file, the filename will become the name attribute for the icon. Resonance icons are named for their specific Chorus context. For example, the packaged-content icon is named “packaged-content” (packaged-content.svg) and not “package” or “gift.”
Add the new .svg file to resonance/src/assets/icons and follow normal PR procedures.

Technical notes

For most other components with size attributes, the default size is a medium one. However, because the icon is included in so many other components, the default size for icons is 100% of the width of its container. If using an icon outside of a component, you should use the size attribute to set the size of the icon.
If using the more icon in the Anthem repo, it will, by default, be animated by styles in that repo; add animated="false" to the res-icon instance to disable this.

Variations

```
1-col
```
```
2-col
```
```
2-up
```
```
3-up-down
```
```
3-up-top
```
```
4-up
```
```
add-circle
```
```
add
```
```
amp
```
```
back-circle
```
```
back
```
```
blockquote
```
```
bold
```
```
calendar-time
```
```
calendar
```
```
cc
```
```
center-align
```
```
check-circle
```
```
check
```
```
clock
```
```
code
```
```
comment
```
```
contract
```
```
copy
```
```
crop
```
```
crosshair
```
```
currency-dollar-sign
```
```
currency-euro
```
```
currency-pound
```
```
custom-story
```
```
dash
```
```
desktop
```
```
down-triangle
```
```
down
```
```
download
```
```
edit
```
```
embed
```
```
expand
```
```
fastforward
```
```
full-bleed
```
```
full-width-impact
```
```
full-width-story
```
```
gallery
```
```
gear
```
```
grid
```
```
hed-code
```
```
hed-overlay-impact
```
```
hed-overlay
```
```
help
```
```
horizontal-story
```
```
horizontal-toc
```
```
image-above
```
```
image-below
```
```
image
```
```
info
```
```
italic
```
```
layout-product-card-brief
```
```
layout-product-card-buttons
```
```
layout-product-card-description
```
```
layout-product-card-full-width-image
```
```
layout-product-card-portrait
```
```
layout-product-card-square
```
```
lead-art
```
```
left-align
```
```
left-hang
```
```
left-triangle
```
```
left
```
```
line
```
```
link
```
```
linkpost
```
```
list
```
```
loading
```
```
mapstacks
```
```
minus-circle
```
```
minus
```
```
more-vertical
```
```
more
```
```
mute
```
```
new-window
```
```
none
```
```
ordered-list
```
```
package
```
```
pause
```
```
phone
```
```
pin
```
```
play
```
```
preview
```
```
promote
```
```
publish
```
```
pullquote
```
```
quickpost
```
```
refresh
```
```
replace
```
```
rewind
```
```
right-align
```
```
right-hang
```
```
right-triangle
```
```
right
```
```
save
```
```
search
```
```
short-image
```
```
small
```
```
split-left
```
```
split-right
```
```
standard-layout
```
```
star
```
```
stop
```
```
storystream
```
```
strikethrough
```
```
tab
```
```
tablet
```
```
tag
```
```
text-block
```
```
tooltip
```
```
trash
```
```
unordered-list
```
```
up-triangle
```
```
up
```
```
upload
```
```
versions
```
```
vertical-story
```
```
vertical-toc
```
```
video-story
```
```
video
```
```
volume-high
```
```
volume-low
```
```
warning
```
```
wide-block
```
```
x-circle
```
```
x
```

Attributes

An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.

<res-component booleanAttribute stringAttribute="parameter">    
  <child-element></child-element>
</res-component>

Attribute	Type	Description
`name` (required)	string	Name of the SVG icon (see list in the style/icons section)
`size`	string	Size of the icon `smaller small medium large`
`hover`	boolean	Only used within `res-input` context to add hover style

API

Name	Type	Data	Description
`name`	property	string	Get/set icon name
`size`	property	string	Get/set icon size

History

Version	Note
0.25.3	Add new pin icon
0.25.1	Update code icon.
0.24.1	Update quick post icon.
0.23.3	Add new code and quickpost icons. Dependency updates to address security alerts.
0.23.1	Add in icon save.
0.21.3	Add in icons layout-product-card-description, layout-product-card-brief, layout-product-card-full-width-image, currency-dollar-sign, currency-euro, currency-pound, custom-story, and copy.
0.21.2	Add in icons for product card specific layouts.
0.21.0	Replace horizontal-story icon.
0.19.0	Add new icon for `text-block`, non-visually edits `info` icon to remove mask so that it works better in some contexts.
0.18.1	Change icon ids to be prefixed specific to the icon name, add full-width-impact and hed-overlay-impact icons
0.18.0	Add new icon for `info`.
0.15.6	Add new icon for `preview`.
0.15.5	Add `hover` attribute for use in `res-input` context.
0.12.0	Apply new spacing scale, along with new icon sizes. Large: 24px; medium: 20px; small: 16px; smaller: 12px. Nix 'smallest'.
0.11.0	Tweaks to accommodate new icon set, remove icon list opts from tag.json
0.10.0	Change size options to large, medium, small, smaller, smallest
0.7.0	Web component refactor
0.2.0	Changed size name from `xsmall` to `mini`.
0.1.0	Initial build to spec.

Resonance Design System