icon

Fragment reference icon

tags

ui

Icons are symbols representing options or states.

Usage

Basic icon by name

puguiicon wa-icon-basic

icon(name="gear")

Sizes

Icons scale with font-size. Set style="font-size: 2em" on the icon or a parent element — there is no size attribute.

Icon sizing via font-size style

puguiicon wa-icon-sizes

row(gap="md" align="center")
  icon(name="gear" style="font-size:1em")
  icon(name="gear" style="font-size:1.5em")
  icon(name="gear" style="font-size:2em")
  icon(name="gear" style="font-size:3em")

Variants

Icon stroke-weight variants

puguiicon wa-icon-variants

row(gap="md" align="center")
  icon(name="star" variant="solid" style="font-size:1.5em")
  icon(name="star" variant="regular" style="font-size:1.5em")
  icon(name="star" variant="light" style="font-size:1.5em")
  icon(name="star" variant="thin" style="font-size:1.5em")

Colors

Icons inherit currentColor. Use style="color: var(--wa-color-{hue}-{tint})" where tint is a 2-digit value on the 05–95 scale (e.g. --wa-color-green-60).

Icon semantic color usage

puguiicon wa-icon-colors

row(gap="md" align="center")
  icon(name="circle-check" variant="solid" style="font-size:1.5em;color:var(--wa-color-green-60)")
  icon(name="triangle-exclamation" variant="solid" style="font-size:1.5em;color:var(--wa-color-yellow-50)")
  icon(name="circle-xmark" variant="solid" style="font-size:1.5em;color:var(--wa-color-red-60)")
  icon(name="circle-info" variant="solid" style="font-size:1.5em;color:var(--wa-color-blue-60)")

Attributes

Name	Type	Default	Description
name	string	-	Icon name.
label	string	-	Accessible description.
variant	solid | regular | light | thin	regular	Icon variant.
rotate	number	0	Rotation in degrees.
flip	x | y | both	-	Flip direction.