“Icons” Design Component

Design: zeplin.

SVG Icons

<x-svg-icon class="designSystem__icon" size="large" name="chevron-right"/>

List of icons

Options

Colors

We use currentColor to fill icons. . That means you just need to change the text color of the parent element or element itself:

<span class="text-red">
    @include('components.icon', ['name' => 'fa-gift'])
</span>
// or
@include('components.icon', ['name' => 'fa-gift', 'class' => 'text-red'])

Sizes

There are three icon sizes in our design system:

Normal: (no additional classes needed).

Large: (add fa-lg class).

2x: (add fa-2x class).

Fixed Width Icons

When different icons widths throw alignment, you can use fa-fw to set icons at a fixed width. It is especially useful in things like navigation lists and list groups.

Without fa-fw

Item 1
Item 2
Item 3

With fa-fw

Item 1
Item 2
Item 3

Accessibility

If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. For this reason, we use aria-hidden="true" attribute in our blade component and partial.

Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. E.g. use aria-label attribute:

<a class="link" href="path/to/gift" aria-label="Gift">
    @include('components.icon', ['name' => 'fa-gift'])
</a>