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.
Normal
icofont-rotate-90
icofont-rotate-180
icofont-rotate-270
icofont-flip-horizontal
icofont-flip-vertical
<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>