Icon

Icon element for displaying symbols from a library or custom URL sources, with flexible sizing and color options.

Live Preview

Heart

Check

Star

Cart

User

Code

1<!-- SVG Icon -->
2<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
3  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
4    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
5</svg>
6
7<!-- Icon from URL -->
8<img
9  src="/icons/leaf.svg"
10  alt="Leaf icon"
11  class="icon"
12/>
13
14<!-- Icon with size variants -->
15<svg class="icon icon--sm">...</svg>
16<svg class="icon icon--md">...</svg>
17<svg class="icon icon--lg">...</svg>
18
19<!-- Icon with colors -->
20<svg class="icon icon--primary">...</svg>
21<svg class="icon icon--secondary">...</svg>

Brand Properties

Properties available in the CRAFT editor for configuring the Icon element. Icon picker uses FontAwesome icons (prefix "Fa" + icon name, e.g., FaCircle, FaCheck, FaStar).

Property	Type	Brand Default	HoB Value	TAE Value
Select an Icon	Icon picker	FaCircle	-	-
Icon Size	Slider	10px	-	-
Icon Color	Color picker (hex)	#000000	#038012	#1A5129
Corner Radius	Input (px)	0	-	-
Border Style	Dropdown	none	-	-
Border Width	Input	0px	-	-
Border Color	Color picker	rgb(0,0,0)	-	-
Opacity	Slider	100%	-	-
Shadow	Toggle	Off	-	-

Size Variants

XS (16px)

SM (20px)

MD (24px)

LG (32px)

XL (48px)

Color Variants

Primary

Secondary

Accent

Success

Error

Muted

Stroke Weight Variants

Weight: 1

Weight: 1.5

Weight: 2

Weight: 3

Common Use Cases

Icon in a list item or feature

Rating icons

Accessibility

Decorative icons should have aria-hidden="true"
Meaningful icons need aria-label or accompanying text
Interactive icons (buttons) need proper roles and labels
Ensure sufficient color contrast against backgrounds
Don't rely on icons alone to convey critical information

Do's and Don'ts

Do

Use icons consistently throughout the interface
Pair icons with text labels when meaning isn't obvious
Choose icons from a consistent icon set
Use appropriate sizing for the context
Ensure icons scale well at all sizes

Don't

Use icons as the only way to convey information
Mix different icon styles inconsistently
Make icons too small to recognize
Use overly complex or detailed icons
Assume all users understand icon meanings

Related Elements

Button - Buttons often contain icons
List - Icon lists for feature highlights
Image - For larger graphics

Unmapped Brand Values

The following brand color values are available but not currently mapped to specific Icon properties in CRAFT.

Brand	Color Type	Value	Suggested Use
HoB	Secondary Color	#8B9F4A	Alternative icon color for secondary emphasis
HoB	Accent Color	#C4A962	Highlight or decorative icons
TAE	Secondary Color	#5F982F	Alternative icon color for secondary emphasis
TAE	Accent Color	#C5D933	Highlight or decorative icons