Colors & Theming
Icons inherit currentColor — style them with any CSS framework or plain CSS.
How color inheritance works
The webfont renders icons as text characters. This means the CSS color property controls the icon color — just like it does for text. Set color on the icon element or any of its parents and the icon picks it up automatically.
Tailwind CSS
text-red-500
text-yellow-400
text-emerald-500
text-blue-500
text-violet-500
text-slate-400
<i class="trker trker-star text-red-500"></i>
<i class="trker trker-star text-blue-500"></i>
<i class="trker trker-heart text-slate-400 hover:text-pink-500"></i>
<!-- Arbitrary value -->
<i class="trker trker-star text-[#ff6b6b]"></i>Bootstrap
<i class="trker trker-x-circle text-danger"></i>
<i class="trker trker-check text-success"></i>
<i class="trker trker-alert text-warning"></i>Plain CSS
.icon-danger { color: #e74c3c; }
.icon-muted { color: currentColor; opacity: 0.4; }Dark Mode
Because icons inherit text color, dark mode support is automatic — just change the parent text color in your dark theme and icons follow along.
light / dark
light / dark
/* Tailwind dark mode */
<i class="trker trker-moon text-slate-600 dark:text-slate-300"></i>