The OdinAdmin template has just been developed — explore the new dashboard, modules and settings. See Details

Icons

Font Awesome 6 is loaded on every page. Bootstrap Icons can be added when you prefer its style — both work in every component.

Font Awesome 6 Includedfas · far · fab

Already in the <head> of every OdinAdmin page. Pick a style prefix, then the icon name. The template mostly uses solid; regular (outline) has a smaller free set.

<!-- In <head> (already there) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<i class="fas fa-user"></i>   <!-- solid -->
<i class="far fa-user"></i>   <!-- regular -->
<i class="fab fa-linkedin"></i>   <!-- brands -->
Bootstrap Icons Optionalbi bi-*

Not loaded by default. Add the stylesheet to a page’s <head> (before css/style.css) — this page does. One class name per icon, outline by default, -fill for the filled version.

<!-- In <head>, before css/style.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<i class="bi bi-person"></i>        <!-- outline -->
<i class="bi bi-person-fill"></i>   <!-- filled -->
<i class="bi bi-linkedin"></i>      <!-- brand -->
How the template uses iconsSame markup with either set — swap the <i> class
Buttons .btn-brand .btn-soft .icon-btn 
<button class="btn-brand"><i class="fas fa-plus"></i> New Page</button>
<button class="btn-soft"><i class="bi bi-download"></i> Export</button>
<button class="icon-btn" aria-label="Edit"><i class="fas fa-pen"></i></button>
Input with icon .input-icon 
<div class="input-icon">
  <i class="fas fa-search"></i>
  <input type="search" class="form-control form-soft" placeholder="Search…">
</div>
Badges & alerts .badge-soft .alert-soft
Published Scheduled Hot 
<span class="badge-soft success"><i class="fas fa-check"></i> Published</span>
<div class="alert-soft info">
  <i class="fas fa-info-circle"></i>
  <div class="alert-body">…</div>
</div>
Icon tiles .icon-tile + colour class 
<span class="icon-tile success"><i class="fas fa-check"></i></span>
<span class="icon-tile violet icon-tile-round"><i class="bi bi-people"></i></span>
<span class="icon-tile info solid icon-tile-lg"><i class="fas fa-rocket"></i></span>
Sidebar link .nav-ico 
<a href="users.html" class="nav-link">
  <i class="nav-ico fas fa-user-friends"></i>
  <span>Users</span>
</a>
Accessibility

Icons next to text are decoration — screen readers read the text. An icon-only button needs a name:

↑ read as “Notifications, button” 
<button class="icon-btn" aria-label="Notifications">
  <i class="far fa-bell" aria-hidden="true"></i>
</button>
Sizes
Font Awesome .fa-xs … .fa-2x
fa-xs
fa-sm
default
fa-lg
fa-xl
fa-2x
Bootstrap Icons — font size .fs-1 … .fs-6
fs-6
fs-5
fs-4
fs-3
fs-2
<i class="fas fa-image fa-lg"></i>
<i class="bi bi-image fs-3"></i>
Colours

Icons use the text colour. Set it with the template’s colour variables, or put the icon in a coloured component (tile, badge, alert).

<i class="fas fa-circle-check" style="color: var(--success)"></i>
<span class="icon-tile danger"><i class="bi bi-heart-fill"></i></span>
Motion & helpers
Fixed width .fa-fw lines up lists
  • Home
  • Pages
  • Settings
<i class="fas fa-spinner fa-spin"></i>
<i class="bi bi-arrow-repeat icon-spin"></i>
<i class="fas fa-home fa-fw"></i> Home
Icon gallery click to copy

Full sets: fontawesome.com/v6/search (free) · icons.getbootstrap.com