Added in v5.3
View on GitHubIcon link
Quickly create stylized hyperlinks with Solaris icons.
On this page
Link chevronLink to this section: Link chevron
Add .link-chevron to bold your link and enhance them with a chevron.
<a class="link-chevron" href="#">This is a sample link with chevron</a>Icon linkLink to this section: Icon link
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 Bootstrap Icons are being used, but you should use Solaris icons in an Orange project.
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.
ExampleLink to this section: 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.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components.
<a class="icon-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewbox="0 0 1000 1000" aria-hidden="true">
<path fill-rule="evenodd" d="M824.958,125h-650a50,50,0,0,0-50,50V825a50,50,0,0,0,50,50h650a50.027,50.027,0,0,0,50.031-50l0.031-650A50.053,50.053,0,0,0,824.958,125ZM800.006,800H200.057l0.033-600H399.958V350l100-75,100.049,75V275l-0.014-75.033,200,0.033ZM599.958,575h50V675H725.02V575h49.938l-87.5-100Zm-150,100h75.031V575h49.969l-87.5-100-87.5,100h50V675Zm0,75h275V700h-275v50Z"/>
</svg>
Icon link
</a><a class="icon-link" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" 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 hoverLink to this section: Style on hover
Add .icon-link-hover to move the icon to the right on hover.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components.
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" 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>CustomizeLink to this section: Customize
Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
CSS variablesLink to this section: CSS variables
Modify the --bs-link-* and --bs-icon-link-* CSS variables as needed to change the default appearance.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components.
Customize the hover transform by overriding the --bs-icon-link-transform CSS variable:
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewbox="0 0 1000 1000" aria-hidden="true">
<path fill-rule="evenodd" d="M650,225H525a25,25,0,0,1-25-25V75ZM325,600H250a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25h75V500H250a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25h75V400H250a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25h75V250H469.113A74.709,74.709,0,0,1,450,200V75H150V650a75,75,0,0,0,75,75H325V600ZM850,425H725a25,25,0,0,1-25-25V275ZM725,475a75,75,0,0,1-75-75V275H350V850a75,75,0,0,0,75,75H850V475H725Zm50,300a25,25,0,0,1-25,25H450a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25H750a25,25,0,0,1,25,25h0Zm0-100a25,25,0,0,1-25,25H450a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25H750a25,25,0,0,1,25,25h0Zm0-100a25,25,0,0,1-25,25H450a25,25,0,0,1-25-25h0a25,25,0,0,1,25-25H750a25,25,0,0,1,25,25h0Z"/>
</svg>
Icon link
</a>Customize the color by overriding the --bs-link-* CSS variable:
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" 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>Sass variablesLink to this section: Sass variables
Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
$icon-link-gap: .3125rem; // Boosted mod: instead of `.375rem`
$icon-link-underline-offset: .25em;
$icon-link-icon-size: 1em;
$icon-link-icon-transition: .2s ease-in-out transform;
$icon-link-icon-transform: translate3d(.25em, 0, 0);
Sass utilities APILink to this section: Sass utilities API
Modify icon links with any of our link utilities for modifying underline color and offset.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components.
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" 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>