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>