Icon

Icons are symbols that can be used to represent various options within an application.

Web Awesome comes bundled with over 2,000 free icons courtesy of Font Awesome. These icons are part of the default icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own custom icon library.

Icon(
  _.name := "star"
)()

Icon(  _.name := "star")()

Not sure which icon to use? Find the perfect icon over at Font Awesome!

Examples

Families & Variants

The default icon library is Font Awesome Free, which comes with two icon families: classic and brands. Use the family attribute to set the icon family.

Many Font Awesome Pro icon families have variants such as thin, light, regular, and solid. Font Awesome Pro users can provide their kit code to unlock additional premium icon families, including sharp, duotone, sharp-duotone, and additional Pro+ icon packs.

For supportive icon families, use the variant attribute to set the variant.

Icon(
  _.name := "eyedropper"
)()
Icon(
  _.name := "grip-vertical"
)()
Icon(
  _.name := "play"
)()
Icon(
  _.name := "star"
)()
Icon(
  _.name := "user"
)()

Icon(  _.name := "eyedropper")()Icon(  _.name := "grip-vertical")()Icon(  _.name := "play")()Icon(  _.name := "star")()Icon(  _.name := "user")()

Labels

For non-decorative icons, use the label attribute to announce it to assistive devices.

Icon(
  _.name  := "star",
  _.label := "Add to favorites"
)()

Icon(  _.name  := "star",  _.label := "Add to favorites")()

Sizing

Icons are sized relative to the current font size. To change their size, set the font-size property on the icon itself or on a parent element as shown below.

div(
  fontSize := "32px",
  cls("flex gap-2"),
  Icon(_.name := "bell")(),
  Icon(_.name := "heart")(),
  Icon(_.name := "image")(),
  Icon(_.name := "microphone")(),
  Icon(_.name := "search")(),
  Icon(_.name := "star")()
)

div(  fontSize := "32px",  cls("flex gap-2"),  Icon(_.name := "bell")(),  Icon(_.name := "heart")(),  Icon(_.name := "image")(),  Icon(_.name := "microphone")(),  Icon(_.name := "search")(),  Icon(_.name := "star")())

Colors

Icons inherit their color from the current text color. Thus, you can set the color property on the <wa-icon> element or an ancestor to change the color.

div(
  color := "#4a90e2",
  cls("flex gap-2 mb-2"),
  Icon(_.name := "exclamation-triangle")(),
  Icon(_.name := "archive")(),
  Icon(_.name := "battery-three-quarters")(),
  Icon(_.name := "bell")()
)
div(
  color := "#9013fe",
  cls("flex gap-2 mb-2"),
  Icon(_.name := "clock")(),
  Icon(_.name := "cloud")(),
  Icon(_.name := "download")(),
  Icon(_.name := "file")()
)
div(
  color := "#417505",
  cls("flex gap-2 mb-2"),
  Icon(_.name := "flag")(),
  Icon(_.name := "heart")(),
  Icon(_.name := "image")(),
  Icon(_.name := "bolt-lightning")()
)
div(
  color := "#f5a623",
  cls("flex gap-2"),
  Icon(_.name := "microphone")(),
  Icon(_.name := "search")(),
  Icon(_.name := "star")(),
  Icon(_.name := "trash")()
)

div(  color := "#4a90e2",  cls("flex gap-2 mb-2"),  Icon(_.name := "exclamation-triangle")(),  Icon(_.name := "archive")(),  Icon(_.name := "battery-three-quarters")(),  Icon(_.name := "bell")())div(  color := "#9013fe",  cls("flex gap-2 mb-2"),  Icon(_.name := "clock")(),  Icon(_.name := "cloud")(),  Icon(_.name := "download")(),  Icon(_.name := "file")())div(  color := "#417505",  cls("flex gap-2 mb-2"),  Icon(_.name := "flag")(),  Icon(_.name := "heart")(),  Icon(_.name := "image")(),  Icon(_.name := "bolt-lightning")())div(  color := "#f5a623",  cls("flex gap-2"),  Icon(_.name := "microphone")(),  Icon(_.name := "search")(),  Icon(_.name := "star")(),  Icon(_.name := "trash")())

Custom Icons

Custom icons can be loaded individually with the src attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a custom icon library.

Icon(
  _.src   := "https://shoelace.style/assets/images/shoe.svg",
  _.style := "font-size: 4rem;"
)()

Icon(  _.src   := "https://shoelace.style/assets/images/shoe.svg",  _.style := "font-size: 4rem;")()