Winnie CSS
  1. Primitives
  2. icon

icon

Foundational icon primitive. 

<i data-component="icon" class="home"></i>

Import

Import just the icon styles.

@import "@winnie-ui/css/spatial/icon";
@import "@winnie-ui/css/visual/icon";

Anatomy

Attach the appropriate data attributes in the structure below.

<i data-component="icon"></i>

Examples

Size

Use the data-size attribute to change the size.

 
<i data-component="icon" class="home" data-size="<size>"></i>

Color

Use the data-accent-color attribute to change the color.

 
<i data-component="icon" class="home" data-accent-color="<color>"></i>

Contrast

Use the data-contrast attribute to change the contrast.

 
<i data-component="icon" class="home" data-contrast="<contrast>"></i>

Reference

icon

Represents the icon element.

AttributeValue
data-accent-color"red" | "orange" | "yellow" | "green" | "blue" | "purple" | "pink" | "grey" | "brand"
data-contrast"low" | "normal" | "high"
data-size"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
Variable
--wui-icon-<data-contrast>-color