Enums: Icon

Control icon sizing and styling with predictable enum values.

Icon enums help you standardize icon size and visual style so icons stay consistent across components and layouts.

How it works

Use IconSize to scale icons and IconStyle to switch between solid, regular, light, and duotone styles.

Examples

  • IconSize.Small for compact action buttons.
  • IconSize.x2 for prominent status indicators.
  • IconStyle.DuoTone for emphasis in mixed palettes.

Reference

IconSize

Defines the size of an icon.

  • IconSize.Default The icon size will not be applied.
  • IconSize.ExtraSmall The icon will be size 0.75em.
  • IconSize.Small The icon will be size 0.875em.
  • IconSize.Large The icon will be size 1.33em (Also applies vertical-align: -25%).
  • IconSize.x2 The icon will be size 2em.
  • IconSize.x3 The icon will be size 3em.
  • IconSize.x4 The icon will be size 4em.
  • IconSize.x5 The icon will be size 5em.
  • IconSize.x6 The icon will be size 6em.
  • IconSize.x7 The icon will be size 7em.
  • IconSize.x8 The icon will be size 8em.
  • IconSize.x9 The icon will be size 9em.
  • IconSize.x10 The icon will be size 10em.

IconStyle

Represents a different look of the same icons.

  • IconStyle.Solid Icon will be filled with single-color.
  • IconStyle.Regular Icon will be outlined with single-color.
  • IconStyle.Light Icon will be slightly lighter.
  • IconStyle.DuoTone Icon will be shown in two-color tones.
On this page