The icon link helper component modifies our default link styles to enhance their appearance and
quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default
gap value. We stylize the underline with a custom offset and color. Icons are
automatically sized to 1em to best match their associated text’s font-size.
Icon links assume Remix Icon is being used, but you can use any
icon or image you like.
When icons are purely decorative, they should be hidden from assistive technologies using
aria-hidden="true", as we’ve done in our examples. For icons that convey
meaning, provide an appropriate text alternative by adding role="img" and an
appropriate aria-label="..." to the SVGs.
Example
Take a regular <a> element, add .icon-link, and insert an icon on
either the left or right of your link text. The icon is automatically sized, placed, and colored.
<a class="icon-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
</svg>
Icon link
</a>
<a class="icon-link" href="#"> <svg
xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16"
aria-hidden="true"> <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846
3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25
1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1
1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372
0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/> </svg> Icon
link </a>
<a class="icon-link" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
<a class="icon-link" href="#"> Icon link <svg
xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16"
aria-hidden="true"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5
0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1
8z"/> </svg> </a>
Style on hover
Add .icon-link-hover to move the icon to the right on hover.
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
<a class="icon-link icon-link-hover" href="#"> Icon link <svg
xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16"
aria-hidden="true"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5
0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1
8z"/> </svg> </a>