Icons

Use <x-icon> instead of raw <i class="fa-solid …">. Import the Font Awesome stylesheet once at the app root, then reference glyphs by short name (star, not fa-star).

The font import is global CSS — add it before components render icons. Tree-shaking does not apply to icon fonts; only import sets you use.

@import '@xngui/icons/fontawesome';import { XIcon } from '@xngui/icons';

XIconStyle covers Font Awesome Free families. Light, thin, and duotone are Pro-only and intentionally excluded.

• solid

  star

  Default — filled glyphs

• regular

  star

  Outlined glyphs

• brands

  github

  Brand logos

Use spin for loading indicators and mirror for directional chevrons in RTL layouts.

• [spin]="true"

  Continuous rotation for loading

• [mirror]="true"

  Horizontal flip for RTL chevrons

Standalone icons map size to --x-icon-size-* tokens. Inline adornments inside controls inherit --x-control-icon-size from the [data-size] host. XSize in @xngui/core · control scale tokens.

• --x-icon-size-xs0.75rem standalone icon
  xs
• --x-icon-size-sm1rem standalone icon
  sm
• --x-icon-size-md1.25rem standalone icon
  md
• --x-icon-size-lg1.5rem standalone icon
  lg
• --x-icon-size-xl2rem standalone icon
  xl
• --x-control-icon-sizeInline adornment inside [data-size] controls
  Button

Search by glyph name. Click a cell to copy the name attribute value.

• star
• heart
• gear
• user
• house
• magnifying-glass
• bell
• envelope
• check
• xmark
• plus
• trash
• pen
• copy
• download
• upload
• circle-info
• triangle-exclamation
• spinner
• bars
• chevron-right
• chevron-left
• arrow-right
• lock
• eye
• calendar
• clock
• bookmark
• share-nodes
• filter
• sort
• ellipsis
• circle-check
• circle-xmark
• bolt

• Favorite item

  Icons without ariaLabel are aria-hidden — use when adjacent text conveys meaning.

  <x-icon name="star" />
• Icon-only buttons and status glyphs need ariaLabel so screen readers get a name.

  <x-icon name="star" ariaLabel="Favorite" />