Icons

.a-icon

Overview

Description

Icons help give visual markers to important content, helping users quickly scan and identify important information. They are also a great tool for communicating brand identity.

Best Practices

Avoid using icons on their own without accompanying text.
Use only one icon per element.

Schema

Name	Description	Type	Default Value	Option(s)
icon.modifier_classes	Specifies modifier classes. All class names should follow the ABEM methodology.	`string`	-	`a-icon--eyebrow` `a-icon--feature` `a-icon--product` `any`
icon.type	The name Font Awesome uses for the desired icon.	`string`	-	`any`
icon.name	The name of the icon, used as part of the title attribute.	`string`	-	`any`
icon.style	Font Awesome style prefix that determines the look and feel of the icon. Options are solid, `fas`; regular, `far`; light, `fal`; duotone, `fad`; and brands, `fab`.	`string`	`fal`	`fas` `far` `fal` `fad` `fab`