Atlas

Icon

Renders an Atlas component icon or a Font Awesome icon, inline and sized against the surrounding text.

<x-atlas::icon>

Icon is a thin wrapper around blade-ui-kit/blade-icons. It renders a <span> with aria-hidden="true" and drops the SVG inside, which means icons are decorative by default and never announced — if an icon is the only content of a control, put the label in that control's slot. 

<x-atlas::icon name="fas-check" />
Preview follows the site's light/dark mode. Open standalone →

Naming

A name is the set prefix, a hyphen, and the icon's name. Two kinds of icon go through this component. Component icons ship with Atlas under the atlas prefix: the chevrons, check, xmark and the rest that Atlas components draw on their own. Content icons — phone, envelope, social marks — come from Font Awesome through owenvoke/blade-fontawesome, which your project installs: fas- for solid, far- for regular, fab- for brands. A name that does not resolve throws SvgNotFound; see Icons.

Atlas draws these on its own: chevrons for button, text link and swiper, the check for checkbox, the xmark for pill filter, the circle exclamation for error, and download and arrow up right from square for button links. They need nothing installed. A project replaces one by putting an SVG of the same name — a plain Font Awesome download — in resources/icons/atlas/, or the folder set in atlas.icons.path; see Icons.

Font Awesome

With blade-fontawesome installed, every Font Awesome icon works here and in every component that takes an icon name. Free has every icon in solid but only some in regular, so fas-phone exists and far-phone does not; Pro adds light, thin and duotone once it is synced into the project. 

<x-atlas::icon name="fas-house" />
<x-atlas::icon name="far-envelope" />
<x-atlas::icon name="fab-github" />
<x-atlas::button icon="fas-arrow-right">Continue</x-atlas::button>
Preview follows the site's light/dark mode. Open standalone →

Sizes

Each step sets --atlas-icon-size from its own token, and the span is always 1.25 times that so icons of different sizes still align on a shared baseline. Leave size off inside another component: button, list and pill filter each set the size from their own type scale, and an explicit size overrides that and unbalances the pairing. 

<x-atlas::icon name="far-envelope" size="xs" />
<x-atlas::icon name="far-envelope" size="sm" />
<x-atlas::icon name="far-envelope" size="md" />
<x-atlas::icon name="far-envelope" size="lg" />
<x-atlas::icon name="far-envelope" size="xl" />
Preview follows the site's light/dark mode. Open standalone →

colors

The default fill is currentColor, so an icon inside colored text follows it for free. Only reach for color when the icon should differ from the text around it — a brand-colored tick in a neutral list, say. The three tokens here are the full set; the wider palette that text link and pill filter offer has no equivalent on the icon. 

<x-atlas::icon name="fas-check" size="lg" />
<x-atlas::icon name="fas-check" size="lg" color="primary" />
<x-atlas::icon name="fas-check" size="lg" color="secondary" />
<x-atlas::icon name="fas-check" size="lg" color="accent" />
Preview follows the site's light/dark mode. Open standalone →

Inside other components

Most of the time you will not write this tag at all. Button, text link, list and pill filter all take an icon name and render the component themselves, which is how they keep the size and color in step with their own state.

Call us
  • Included
  • Also included 
<x-atlas::button icon="fas-download">Download</x-atlas::button>
<x-atlas::text-link href="/contact" icon="fas-phone" icon-position="left">Call us</x-atlas::text-link>
<x-atlas::list icon="fas-check" :items="['Included', 'Also included']" />
<x-atlas::pill-filter active icon="fas-xmark">Oak</x-atlas::pill-filter>
Preview follows the site's light/dark mode. Open standalone →

Button

Buttons and link buttons, with sizes, variants, colors and icons that follow the attributes you set.

Text link

An inline anchor with an animated underline and optional icons that slide outwards on hover.

List

Bulleted, numbered, icon and inline lists, built either from an array of strings or from item children.

Pill filter

A toggleable filter chip. Outlined when off, filled with a remove icon when on.

Reference

<x-atlas::icon>

  • Name
    name
    Type
    string
    Default
    default: ''
    Description
    Icon name, prefix included: an atlas- component icon, a Font Awesome name (fas-, far-, fab-) when blade-fontawesome is installed, or a name from another registered set. A name that does not resolve throws. An empty name renders an empty span.
  • Name
    size
    Type
    xs | sm | md | lg | xl
    Default
    default: '' (inherits --atlas-icon-size)
    Description
    Sets the icon size token. Left unset the icon follows whatever size its context defines.
  • Name
    color
    Type
    primary | secondary | accent
    Default
    default: '' (currentColor)
    Description
    Fills the icon from a color token instead of inheriting the text color.