Icon Link
The icon-link helper aligns a Bootstrap Icon with link text, sizes it to the font and adds a tidy gap. Add icon-link-hover to nudge the icon on hover, and set --ui-icon-link-transform for a custom movement.
1Read more arrow
The classic icon after the text; icon-link-hover nudges the arrow on hover.
<a class="icon-link icon-link-hover" href="#">Read the full story<i class="bi bi-arrow-right" aria-hidden="true"></i></a>2Back link
Icon first, with a custom transform so the arrow moves left on hover.
<a class="icon-link icon-link-hover link-secondary" href="#" style="--ui-icon-link-transform:translate3d(-.25rem,0,0)"><i class="bi bi-arrow-left" aria-hidden="true"></i>Back to support</a>3Download link
A download icon that bounces down on hover.
<a class="icon-link icon-link-hover" href="#" style="--ui-icon-link-transform:translate3d(0,.2rem,0)"><i class="bi bi-download" aria-hidden="true"></i>Download brochure (PDF, 1 MB)</a>4Opens in a new view
An external-style indicator after the text that moves up and right.
<a class="icon-link icon-link-hover" href="#" style="--ui-icon-link-transform:translate3d(.125rem,-.125rem,0)">Partner portal<i class="bi bi-box-arrow-up-right" aria-hidden="true"></i></a>5Card footer action
An icon link as the call to action at the bottom of a card.
Smart reporting
Friendly people answer your questions quickly, by phone, chat or email.
<div class="card" style="max-width:22rem">
<div class="card-body">
<h3 class="h6">Smart reporting</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div class="card-footer bg-transparent">
<a class="icon-link icon-link-hover small font-semibold" href="#">View details<i class="bi bi-chevron-right" aria-hidden="true"></i></a>
</div>
</div>6Navigation list
Icon links without underline for a compact quick-links menu.
<nav aria-label="Quick links">
<ul class="list-unstyled vstack gap-2 mb-0">
<li><a class="icon-link link-body-emphasis no-underline" href="#"><i class="bi bi-house" aria-hidden="true"></i>Home</a></li>
<li><a class="icon-link link-body-emphasis no-underline" href="#"><i class="bi bi-calendar-event" aria-hidden="true"></i>Events</a></li>
<li><a class="icon-link link-body-emphasis no-underline" href="#"><i class="bi bi-envelope" aria-hidden="true"></i>Messages</a></li>
<li><a class="icon-link link-body-emphasis no-underline" href="#"><i class="bi bi-question-circle" aria-hidden="true"></i>Help</a></li>
</ul>
</nav>7Coloured icon links
Combine icon-link with link-* colours for intent.
<div class="flex flex-wrap gap-4">
<a class="icon-link link-success" href="#"><i class="bi bi-check-circle" aria-hidden="true"></i>Approve</a><a class="icon-link link-danger" href="#"><i class="bi bi-x-circle" aria-hidden="true"></i>Reject</a><a class="icon-link link-warning" href="#"><i class="bi bi-flag" aria-hidden="true"></i>Flag</a><a class="icon-link link-info" href="#"><i class="bi bi-info-circle" aria-hidden="true"></i>More info</a>
</div>8With underline helpers
icon-link plus link offset and underline opacity utilities.
<a class="icon-link link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="#"><i class="bi bi-bookmark" aria-hidden="true"></i>Save for later</a>9Links in a table
Small icon links in a table cell for per-row documents.
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Total</th>
<th scope="col" class="text-end">Document</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD-3570</td>
<td>$84.91</td>
<td class="text-end"><a class="icon-link small" href="#"><i class="bi bi-receipt" aria-hidden="true"></i>Invoice</a></td>
</tr>
<tr>
<td>#TX-5942</td>
<td>$505.85</td>
<td class="text-end"><a class="icon-link small" href="#"><i class="bi bi-receipt" aria-hidden="true"></i>Invoice</a></td>
</tr>
<tr>
<td>#ORD-3950</td>
<td>$178.44</td>
<td class="text-end"><a class="icon-link small" href="#"><i class="bi bi-receipt" aria-hidden="true"></i>Invoice</a></td>
</tr>
</tbody>
</table>10Inside an alert
An alert with an icon link to the next step.
Your trial ends on Feb 13, 2027.
Choose a plan
<div class="alert alert-warning mb-0">
<strong>Your trial ends on Feb 13, 2027.</strong> <a class="icon-link icon-link-hover alert-link" href="#">Choose a plan<i class="bi bi-arrow-right" aria-hidden="true"></i></a>
</div>11Footer contact links
Address, phone and email links in a footer column.
<address class="vstack gap-2 small mb-0">
<a class="icon-link link-secondary no-underline" href="#"><i class="bi bi-geo-alt" aria-hidden="true"></i>74 Market Square, Prague</a> <a class="icon-link link-secondary no-underline" href="tel:+15550100"><i class="bi bi-telephone" aria-hidden="true"></i>+1 (555) 445-6563</a> <a class="icon-link link-secondary no-underline" href="mailto:hello@example.com"><i class="bi bi-envelope" aria-hidden="true"></i>hello@example.com</a>
</address>12Large call to action
icon-link sizes the icon with the text, so it works in larger font sizes too.
<a class="icon-link icon-link-hover text-xl font-semibold link-primary no-underline" href="#">Start your free trial<i class="bi bi-arrow-right-circle-fill" aria-hidden="true"></i></a>13Previous and next
Pagination text links with arrow icons that move outward on hover.
<nav class="flex justify-between" aria-label="Chapter navigation">
<a class="icon-link icon-link-hover" href="#" style="--ui-icon-link-transform:translate3d(-.25rem,0,0)"><i class="bi bi-chevron-left" aria-hidden="true"></i>Previous chapter</a> <a class="icon-link icon-link-hover" href="#">Next chapter<i class="bi bi-chevron-right" aria-hidden="true"></i></a>
</nav>14File list
File type icons in front of attachment names.
- Price list 729 KB
- Contract template 772 KB
- Brand assets 517 KB
<ul class="list-unstyled vstack gap-2 mb-0">
<li><a class="icon-link" href="#"><i class="bi bi-filetype-pdf" aria-hidden="true"></i>Price list</a> <small class="text-muted">729 KB</small></li>
<li><a class="icon-link" href="#"><i class="bi bi-filetype-docx" aria-hidden="true"></i>Contract template</a> <small class="text-muted">772 KB</small></li>
<li><a class="icon-link" href="#"><i class="bi bi-file-earmark-zip" aria-hidden="true"></i>Brand assets</a> <small class="text-muted">517 KB</small></li>
</ul>15Help link
A muted help link next to a form label.
<div class="flex justify-between items-baseline">
<label class="form-label" for="hp-api-1233">API name</label>
<a class="icon-link small link-secondary" href="#"><i class="bi bi-question-circle" aria-hidden="true"></i>What is this?</a>
</div>
<input class="form-control" id="hp-api-1233" type="text" placeholder="my-project">16Heading anchor
A small link icon after a heading for sharing a deep link to the section.
<h3 class="h5 flex items-center gap-2">99.99% uptime <a class="icon-link link-secondary link-opacity-75 link-opacity-100-hover" href="#" aria-label="Link to this section"><i class="bi bi-link-45deg" aria-hidden="true"></i></a></h3>17Rotating icon
A custom transform that rotates the icon on hover, nice for refresh or settings links.
<a class="icon-link icon-link-hover" href="#" style="--ui-icon-link-transform:rotate(90deg)"><i class="bi bi-arrow-clockwise" aria-hidden="true"></i>Refresh data</a>18Profile actions
A row of icon links under a profile name.
<div>
<strong class="block">Tariq Whitaker</strong>
<div class="flex flex-wrap gap-4 small mt-1">
<a class="icon-link" href="#"><i class="bi bi-chat" aria-hidden="true"></i>Message</a> <a class="icon-link" href="#"><i class="bi bi-calendar-plus" aria-hidden="true"></i>Schedule</a> <a class="icon-link link-secondary" href="#"><i class="bi bi-share" aria-hidden="true"></i>Share</a>
</div>
</div>19Event link with date icon
A calendar icon link inside an event teaser.
<div class="border rounded-md p-4">
<h3 class="h6 mb-1">Writing status updates people actually read</h3>
<p class="small text-muted mb-2">Jan 27, 2027 · Denver</p>
<a class="icon-link icon-link-hover small" href="#"><i class="bi bi-calendar-check" aria-hidden="true"></i>Add to calendar</a>
</div>20Dark panel links
Icon links in light colour on a dark promo panel.
<div class="text-bg-dark rounded-md p-4 flex flex-wrap gap-4" data-ui-theme="dark">
<a class="icon-link icon-link-hover link-light" href="#"><i class="bi bi-play-circle" aria-hidden="true"></i>Watch the tour</a> <a class="icon-link icon-link-hover link-warning" href="#"><i class="bi bi-tag" aria-hidden="true"></i>See pricing</a>
</div>