Icons

Atlas renders icons through blade-ui-kit/blade-icons and keeps two kinds apart. See Icon for the component and its props; this guide is about the system behind it.

Two kinds of icon

| Kind | What | Comes from | Prefix | | --- | --- | --- | --- | | Component icons | What Atlas components draw themselves: chevrons, check, close, error | Atlas | atlas | | Content icons | What your project passes in: phone, envelope, social marks | Font Awesome, through blade-fontawesome | fas, far, fab (and the Pro prefixes) |

Atlas never claims a Font Awesome prefix, so the two sit side by side.

Component icons

These ship with Atlas and need nothing installed:

| Name | Used by | | --- | --- | | atlas-angle-down-regular-full | Button linking to an anchor (href="#…") | | atlas-angle-left-regular-full | Text link with icon-position="left", swiper | | atlas-angle-right-regular-full | Button, text link, swiper | | atlas-arrow-up-right-from-square-regular-full | Button with target="_blank" | | atlas-check-regular-full | Checkbox | | atlas-circle-exclamation-light-full | Error | | atlas-download-regular-full | Button with download | | atlas-xmark-regular-full | Pill filter |

The name is atlas- plus the SVG filename; the suffix is the weight. Pass any of them to a component that takes an icon, like any other name.

Replacing a component icon

Put an SVG of the same name in your project's resources/icons/atlas/. That folder is searched before the icons Atlas ships, so

resources/icons/atlas/check-regular-full.svg

replaces the tick in every checkbox, and every name you do not replace still comes from Atlas.

The file can be a plain Font Awesome 7 download, unedited and under its own name. Those "full" SVGs pad the glyph inside a 640 viewBox, and Atlas sizes any icon with that viewBox to make up for it, so the glyph comes out at the icon size. To change a component's icon in one place only, pass it an icon instead.

Using a different folder

If your project keeps its icons elsewhere, point Atlas at that folder in config/atlas.php (php artisan atlas:config publishes it), as an absolute path:

'icons' => [
    'path' => resource_path('images/icons/regular'),
],

On a multisite every site shares it.

Content icons with Font Awesome

Install blade-fontawesome. Atlas suggests it but does not require it:

composer require owenvoke/blade-fontawesome

Every free Font Awesome icon then works by name, in <x-atlas::icon> and in every component that takes an icon — button, text link, list, pill filter, contact list, social list:

<x-atlas::icon name="fas-house" />
<x-atlas::button icon="far-envelope">Mail us</x-atlas::button>
<x-atlas::social-list :items="[['icon' => 'fab-linkedin', 'url' => '…']]" />

| Prefix | Set | | --- | --- | | fas | Solid | | far | Regular | | fab | Brands |

The names are Font Awesome's own; browse them on fontawesome.com with the free filter on. Free has every icon in solid but only some in regular, so fas-phone exists and far-phone does not. The same names work in blade-icons' own <x-icon name="…" /> and @svg('…'). A name that does not resolve throws SvgNotFound.

Font Awesome Pro

blade-fontawesome registers the Pro sets — light (fal), thin (fat), duotone (fad) and the sharp variants — once Pro is synced into the project:

npm install --save @fortawesome/fontawesome-pro
php artisan blade-fontawesome:sync-icons --pro

That needs the Font Awesome npm token wherever the project installs or builds. Component icons are unaffected: they still come from Atlas.

Using another set

blade-icons sets are additive. Register your own in config/blade-icons.php under any prefix that Atlas and Font Awesome do not use:

'sets' => [
    'acme' => [
        'path' => 'resources/svg',
        'prefix' => 'acme',
    ],
],

Then <x-atlas::icon name="acme-logo" /> resolves from your set.