Icons are symbols or visual expressions that communicate meaning through the use of graphics.
The Cedar Icon Library contains simple, functional icons to use across the REI digital platform to help make navigation easier for common actions.
Icons are available in SVG format at 24px, and can be displayed using the Icon Component.
The Cedar Icon component (cdr-icon) is intended to consume icons hosted in the Cedar Icon Library.
For information about using the Cedar Icon API, design guidelines, and accessibility considerations, visit the Icon component article.
Cedar has a library of reusable icons with names and descriptive tags.
Visit the Cedar Icon Library (opens new window) for a complete and searchable list of icons.
Cedar icons follow the kebab-case naming convention. For example, {group(s)}-{name}-{variation}-{size}.svg where:
File name examples:
arrow-down.svg
arrow-left.svg
arrow-right.svg
arrow-up.svg
check-fill.svg
check.svg
check-lg.svg
check-sm.svg
check-stroke.svg
menu.svg
gear-tent.svg
gear-tent-outline.svg
gear-backpack.svg
gear-backpack-stroke.svg
gear-sleeping-bag.svg
gear-bike.svg
gear-boating-kayak.svg
gear-boating-canoe.svg
gear-boating-paddleboard.svg
The @rei/cedar
component package exports an inline Vue component for every icon in the Cedar library. The inline icon components are the easiest way to make use of the Cedar icon library if you are building an application using Vue. These components are prefixed with the word Icon
and are named using PascalCase, for example: IconCaretDown
, IconExperiencesBackpacking
.
Icon sprite sheets should be avoided in favor of using the inline cedar icon components, as maintaining sprite sheets is difficult and usually has minimal impact on performance. However we do offer a sprite option for teams that needd to optimize their icon usage.
The Cedar Icon Library has an easy to-use sprite creator (opens new window). Alternately, the icon library API also provides sprite generation (opens new window). The sprite can then be referenced using the CdrIcon component
Cedar welcomes and encourages contributions to the icon library that are consistent with the REI style.
Sketch Icon Path Geometry
A Sketch icon artboard must contain a single combined-shape object in order to export correctly.
Style
These rules are subjective, and can be bent or broken.
For more style guidelines, see the Iconography article.
Dimensions
Icons must be created at 24x24px size format. However, they can be displayed in any one of three sizes:
Note: Icons in the CDR Icons • vNext library may not be in the library yet.
Contact the Cedar team using the #cedar-user-support (opens new window) Slack channel.