Bootstrap

Trker icons drop right into Bootstrap projects — contextual colors, buttons, badges, and alerts all work out of the box.

Contextual Colors

Bootstrap's text utility classes map directly to icon colors since icons inherit currentColor:

<i class="trker trker-check-circle text-success"></i>
<i class="trker trker-warning text-warning"></i>
<i class="trker trker-times-circle text-danger"></i>
<i class="trker trker-info-circle text-info"></i>

Buttons

Add icons inside Bootstrap buttons — they inherit the button's text color automatically:

<button class="btn btn-primary">
  <i class="trker trker-download me-2"></i>
  Download
</button>

<button class="btn btn-outline-danger">
  <i class="trker trker-trash me-2"></i>
  Delete
</button>

<!-- Icon-only button -->
<button class="btn btn-secondary" aria-label="Settings">
  <i class="trker trker-settings" aria-hidden="true"></i>
</button>

Badges

<span class="badge bg-success">
  <i class="trker trker-check me-1"></i>
  Active
</span>

<span class="badge bg-warning text-dark">
  <i class="trker trker-clock me-1"></i>
  Pending
</span>

Alerts

<div class="alert alert-danger d-flex align-items-center gap-2" role="alert">
  <i class="trker trker-exclamation-triangle trker-fw" aria-hidden="true"></i>
  Something went wrong. Please try again.
</div>