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 --bs-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="--bs-icon-link-transform:translate3d(-.25rem,0,0)"><i class="bi bi-arrow-left" aria-hidden="true"></i>Back to recovery</a>3Download link
A download icon that bounces down on hover.
<a class="icon-link icon-link-hover" href="#" style="--bs-icon-link-transform:translate3d(0,.2rem,0)"><i class="bi bi-download" aria-hidden="true"></i>Download brochure (PDF, 9 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="--bs-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.
Yoga
Our team has done this many times, so you never have to guess.
<div class="card" style="max-width:22rem">
<div class="card-body">
<h3 class="h6">Yoga</h3>
<p class="small mb-0">Our team has done this many times, so you never have to guess.</p>
</div>
<div class="card-footer bg-transparent">
<a class="icon-link icon-link-hover small fw-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 text-decoration-none" href="#"><i class="bi bi-house-fill" aria-hidden="true"></i>Home</a></li>
<li><a class="icon-link link-body-emphasis text-decoration-none" href="#"><i class="bi bi-calendar-event-fill" aria-hidden="true"></i>Events</a></li>
<li><a class="icon-link link-body-emphasis text-decoration-none" href="#"><i class="bi bi-envelope-fill" aria-hidden="true"></i>Messages</a></li>
<li><a class="icon-link link-body-emphasis text-decoration-none" href="#"><i class="bi bi-question-circle-fill" aria-hidden="true"></i>Help</a></li>
</ul>
</nav>7Coloured icon links
Combine icon-link with link-* colours for intent.
<div class="d-flex flex-wrap gap-3">
<a class="icon-link link-success" href="#"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Approve</a><a class="icon-link link-danger" href="#"><i class="bi bi-x-circle-fill" aria-hidden="true"></i>Reject</a><a class="icon-link link-warning" href="#"><i class="bi bi-flag-fill" aria-hidden="true"></i>Flag</a><a class="icon-link link-info" href="#"><i class="bi bi-info-circle-fill" 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-fill" 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-1067</td>
<td>$55.80</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-1451</td>
<td>$361.04</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>#INV-9852</td>
<td>$302.11</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 Dec 2, 2026.
Choose a plan
<div class="alert alert-warning mb-0">
<strong>Your trial ends on Dec 2, 2026.</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 text-decoration-none" href="#"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i>414 Willow Way, Oslo</a> <a class="icon-link link-secondary text-decoration-none" href="tel:+15550100"><i class="bi bi-telephone-fill" aria-hidden="true"></i>+1 (555) 150-3770</a> <a class="icon-link link-secondary text-decoration-none" href="mailto:hello@example.com"><i class="bi bi-envelope-fill" 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 fs-4 fw-semibold link-primary text-decoration-none" 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="d-flex justify-content-between" aria-label="Chapter navigation">
<a class="icon-link icon-link-hover" href="#" style="--bs-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 473 KB
- Contract template 867 KB
- Brand assets 223 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-body-secondary">473 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-body-secondary">867 KB</small></li>
<li><a class="icon-link" href="#"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i>Brand assets</a> <small class="text-body-secondary">223 KB</small></li>
</ul>15Help link
A muted help link next to a form label.
<div class="d-flex justify-content-between align-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-fill" 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 d-flex align-items-center gap-2">Flexible plans <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="--bs-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="d-block">Omar Whitaker</strong>
<div class="d-flex flex-wrap gap-3 small mt-1">
<a class="icon-link" href="#"><i class="bi bi-chat-fill" aria-hidden="true"></i>Message</a> <a class="icon-link" href="#"><i class="bi bi-calendar-plus-fill" aria-hidden="true"></i>Schedule</a> <a class="icon-link link-secondary" href="#"><i class="bi bi-share-fill" 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 p-3">
<h3 class="h6 mb-1">Our most popular classes this month</h3>
<p class="small text-body-secondary mb-2">Jan 19, 2027 · Denver</p>
<a class="icon-link icon-link-hover small" href="#"><i class="bi bi-calendar-check-fill" 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 p-3 d-flex flex-wrap gap-3" data-bs-theme="dark">
<a class="icon-link icon-link-hover link-light" href="#"><i class="bi bi-play-circle-fill" aria-hidden="true"></i>Watch the tour</a> <a class="icon-link icon-link-hover link-warning" href="#"><i class="bi bi-tag-fill" aria-hidden="true"></i>See pricing</a>
</div>