Icons are used in this design system as both static and interactive components.
In addition to the decorative icon used preceding h1 elements, examples of actionable icons are shown below.
Icons can be used for both interactive or decorative purposes, but should be used intentionally. All interactive icons are pulled from the Font Awesome library.
Make sure all actionable icons include a descriptive aria-label attribute. Decorative icons should include aria-hidden="true".
<!-- Actionable -->
<a href="#" alt="..."><i class="fa-brands fa-# fa-sm" aria-label="..."></i></a>
<!-- Static -->
<i class="fa-brands fa-# fa-sm" aria-hidden="true"></i>