Tailwind CSS Icon - Versoly UI

Added in 1.0

Example

<i class="fab fa-twitter text-3xl text-primary"></i>

Colors

primary
secondary
tertiary
neutral
success
info
danger
warning
dark
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-primary"></i>
  <div>primary</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-secondary"></i>
  <div>secondary</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-tertiary"></i>
  <div>tertiary</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-neutral"></i>
  <div>neutral</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-success"></i>
  <div>success</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-info"></i>
  <div>info</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-danger"></i>
  <div>danger</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-warning"></i>
  <div>warning</div>
</div>
<div class="min-w-[60px]">
  <i class="fab fa-twitter text-3xl text-dark"></i>
  <div>dark</div>
</div>

Sizes

Size is based on TailwindCSS instead of Font Awesome. This makes it possible to easily edit the size using the Tailwind config.

text-xs
text-sm
base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-5xl
text-6xl
text-7xl
text-8xl
text-9xl
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-xs text-primary"></i>
  <div>text-xs</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-sm text-primary"></i>
  <div>text-sm</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter base text-primary"></i>
  <div>base</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-lg text-primary"></i>
  <div>text-lg</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-xl text-primary"></i>
  <div>text-xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-2xl text-primary"></i>
  <div>text-2xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-3xl text-primary"></i>
  <div>text-3xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-4xl text-primary"></i>
  <div>text-4xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-5xl text-primary"></i>
  <div>text-5xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-6xl text-primary"></i>
  <div>text-6xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-7xl text-primary"></i>
  <div>text-7xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-8xl text-primary"></i>
  <div>text-8xl</div>
</div>
<div class="min-w-[120px]">
  <i class="fab fa-twitter text-9xl text-primary"></i>
  <div>text-9xl</div>
</div>