Place any Font Awesome 6 icon as a crisp inline SVG, with full control over colour and size through theme tokens.
Icons help anywhere text alone is slow to scan: feature lists, navigation items, status indicators, or next to a heading to reinforce its meaning. Because the icon renders as inline SVG rather than a font glyph or image file, it stays sharp at any size and inherits colour from its own color prop without an extra network request.
A common pattern is pairing an Icon with a short label inside a feature grid, or using it inside a CTA button to reinforce the action, for example an arrow or a checkmark. Any Font Awesome 6 solid, regular or brand icon can be referenced by name, such as fa-solid fa-star or fa-brands fa-github.
Typical use cases
A webshop often uses Icon in a trust-badge row beneath the Hero or near the checkout button — a truck for free shipping, a shield for secure payment, each paired with a short label. A portfolio site typically uses the fa-brands set for a row of social links in the footer, one Icon per platform. For professional services, pairing one Icon per service in a grid of cards is a common way to make a service list scannable without relying on photography — when that list comes from a data type instead of being hand-written, the cards can come from a Records loop instead.
Accessibility and consistency
Because the icon renders as a plain SVG with no built-in text alternative, always keep it next to a visible label when the icon conveys meaning rather than pure decoration — an icon-only button should carry its own accessible label on the surrounding element, since the icon itself has none. When several icons appear together, such as in a feature grid or trust-badge row, keep boxSize and colour consistent across all of them using the same theme tokens; mixing sizes or ad-hoc colours reads as an error rather than a deliberate hierarchy.
Stick to icon names that exist in the free Font Awesome 6 set (fa-solid, fa-regular, fa-brands); Pro-only icon names will silently fail to render. Because each Icon is inline SVG rather than an icon font or a separate image file, there's no extra network request per icon and no risk of the flash of missing glyphs that icon fonts sometimes show while loading — a real advantage when a page uses dozens of icons across a feature grid or navigation.
Icon shows up inside other blocks too, not just on its own — a CTA button commonly takes one as a leading element to reinforce the action, and a MobileMenu trigger typically uses one for the hamburger glyph itself. Reusing the same icon for the same meaning across a site — always the same arrow for 'next', always the same checkmark for 'included' — helps visitors build a mental map of the interface faster than varying icon choices would.
<Icon icon='fa-solid fa-star' color='theme.accent' boxSize='6' />