Contributing icons

Have a new icon in mind? If you haven’t found an icon in the Cedar icon library to suit your purpose, consider contributing a new one.

To get started:

1. Read our foundational icon guidelines to make sure your icon design is consistent with REI style.
2. Check the icon contribution requirements on this page for information on display dimensions, naming conventions and more.
3. To add your icon to the Figma icon library, reach out to the team on the #cedar-user-support Slack channel.
4. If you need help designing and creating your icon idea, the Cedar team is happy to consult with you.

Make sure your icon meets the following requirements:

Single Path:

Each Cedar icon must be composed of a single path object.

Style:

• 2px stroke weight
• 1px radius rounded edges and terminals
• Pixel aligned for proper anti-aliasing and rasterizing

If you need to modify these style rules, first reach out to the Cedar team for feedback.

Dimensions:

Icons must be created at 24x24px size format. However, they can be displayed in any one of three sizes:

• Small: 16x16px
• Medium: 24x24px
• Large: 32x32px

Naming conventions

Cedar icons follow the kebab-case naming convention. For example, {group(s)}-{name}-{variation}-{size}.svg:

• {groups}: A namespace for alphabetized grouping. Could be more than one
• {name}: The name of the icon
• {variation}: Variations of the same icon - fill vs stroke - horizontal vs vertical
• {size}: sm for 16px and lg for 32px. 24px icons don't have a size suffix

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