“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:
fa-lg
class).
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.
fa-fw
- Item 1
- Item 2
- Item 3
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>