01 Icon Sizes
Use the icofont-xs, icofont-sm, icofont-md, icofont-lg or icofont-2x, icofont-3x ... icofont-10x classes to resize the icons to their relative containers.
<i class="icofont-dart icofont-1x"></i>
<i class="icofont-dart icofont-2x"></i>
<i class="icofont-dart icofont-3x"></i>
<i class="icofont-dart icofont-4x"></i>
<i class="icofont-dart icofont-5x"></i>
02 List Icons
To replace the bullets in unordered lists, use the icofont-ul class.
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6
<ul className="icofont-ul">
 <li><span class="icofont-server"></span> List Item 1</li>
 <li><span class="icofont-clock-time"></span> List Item 2</li>
 <li><span className="icofont-plus"></span> List Item 3</li></ul>
03 Flip & Rotate
Use the icofont-rotate-* or icofont-flip-* class to arbitrarily rotate or flip icons.
<i class="icofont-arrow-right icofont-rotate-90"></i>
<i class="icofont-arrow-right icofont-rotate-180"></i>
<i class="icofont-arrow-right icofont-rotate-270"></i>
<i class="icofont-arrow-right icofont-flip-horizontal"></i>
<i class="icofont-arrow-right icofont-flip-vertical"></i>
04 Duotone icon
Use the icofont-duotone along with icofont-* class to use duotone icon.
<i class="icofont-duotone icofont-add-users icofont-1x"></i>
<i class="icofont-duotone icofont-apply icofont-2x"></i>
<i class="icofont-duotone icofont-archive icofont-3x"></i>
<i class="icofont-duotone icofont-components icofont-4x"></i>
<i class="icofont-duotone icofont-comment icofont-5x"></i>