Plaats elk Font Awesome 6-icoon als scherpe inline SVG, met volledige controle over kleur en grootte via theme-tokens.
Toepassingen per site-type
Op een webshop verduidelijkt een icoon vaak praktische informatie: een vrachtwagen bij 'gratis verzending', een schild bij 'veilig betalen' of een retourpijl bij het ruilbeleid. Een portfolio-site gebruikt iconen spaarzamer, bijvoorbeeld sociale-mediaknoppen in de footer of een klein pijltje bij een externe link. Bij een zakelijke dienstverlener werken iconen goed naast een Each-lijst met diensten: elke dienst krijgt een passend icoon, zodat de lijst sneller scanbaar is dan platte tekst alleen.
Een veelgemaakte fout is te veel verschillende iconen door elkaar gebruiken, bijvoorbeeld een mix van gevulde ('solid') en lijn-iconen ('regular') op dezelfde pagina. Dat oogt inconsistent. Kies één stijl voor de hele site en houd je daaraan, ook in blocks als FAQ of navigatie-elementen. Een tweede valkuil is een icoon gebruiken zonder begeleidende tekst waar de betekenis niet vanzelfsprekend is: een icoon alleen is voor de meeste bezoekers dubbelzinnig, tenzij het gaat om een zeer herkenbaar symbool zoals een vergrootglas voor zoeken.
Voor toegankelijkheid geldt: een icoon dat puur decoratief is naast tekst hoeft geen extra toelichting, maar een icoon dat als enige de betekenis van een knop draagt — bijvoorbeeld een los kruisje om een dialoogvenster te sluiten — heeft een duidelijk label nodig op de omliggende knop, zodat schermlezers de actie kunnen voorlezen. Omdat het icoon als inline SVG rendert, is er geen extra afbeeldingsverzoek nodig en blijft de pagina licht, ook bij tientallen iconen op één pagina zoals een uitgebreide featurelijst.
Gebruik dit block overal waar je een klein visueel accent nodig hebt: naast een feature in een lijst, in een knop, of als bullet-vervanger in een stappenplan. Omdat het icoon als SVG wordt ingeladen, blijft het op elk formaat scherp — anders dan een PNG-afbeelding.
Zo bespaar je het beheer van losse icoonbestanden: je kiest een naam uit de Font Awesome 6-set en stuurt kleur en grootte mee als props, bijvoorbeeld een groen vinkje bij een prijzenlijst of een envelopicoon naast een contactlink.
<Icon icon='fa-solid fa-star' color='theme.accent' boxSize='6' />