Icon
LeptonX uses Free, high quality, open source icon library with over 1,600 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project. For more, please visit the plugin's documentation
Example
Preview
HTML
<i class="bi bi-alarm-fill fs-2 me-3"></i>
<i class="bi bi-arrow-down-right-circle fs-2 me-3"></i>
<i class="bi bi-bar-chart-fill fs-2 me-3"></i>
<i class="bi bi-cloud fs-2 me-3"></i>
<i class="bi bi-pin-fill fs-2 me-3"></i>
<i class="bi bi-folder fs-2 me-3"></i>
<i class="bi bi-geo-alt fs-2 me-3"></i>
<i class="bi bi-window-dash fs-2 me-3"></i>
Colors
Preview
primary
secondary
success
danger
info
light
dark
white
HTML
<div class="d-flex flex-wrap">
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-primary fs-2 mb-1"></i>
<span>primary</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-secondary fs-2 mb-1"></i>
<span>secondary</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-success fs-2 mb-1"></i>
<span>success</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-danger fs-2 mb-1"></i>
<span>danger</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-info fs-2 mb-1"></i>
<span>info</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-light fs-2 mb-1"></i>
<span>light</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-dark fs-2 mb-1"></i>
<span>dark</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images text-white bg-dark px-1 fs-2 mb-1"></i>
<span>white</span>
</div>
</div>
Sizes
Preview
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
HTML
<div class="d-flex flex-wrap align-items-end">
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images fs-1 mb-1"></i>
<span>.fs-1</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images fs-2 mb-1"></i>
<span>.fs-2</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images fs-3 mb-1"></i>
<span>.fs-3</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images fs-4 mb-1"></i>
<span>.fs-4</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images fs-5 mb-1"></i>
<span>.fs-5</span>
</div>
<div class="d-flex flex-column flex-center me-3">
<i class="bi bi-images fs-6 mb-1"></i>
<span>.fs-6</span>
</div>
</div>
