We are using Remix icon library for icons.
Read the official Remix Icon's Documentation for a full list of instructions and other options.
Remix Icon is a simple yet beautifully created icons for designers and developers to use in your next project.
We have already included Remix icons in template so you don't have to worry about including any files. Check below mentioned path to find the location in your template.
<link rel="stylesheet" href="assets/vendor/fonts/remixicon/remixicon.css" />Basic Usage
| Class | Value |
|---|---|
class="ri-{value}"
|
ICON_NAME |
Sizing
<i class="ri-arrow-up-line ri-48px"></i>
<i class="ri-arrow-up-line ri-36px"></i>
<i class="ri-arrow-up-line ri-24px"></i>
<i class="ri-arrow-up-line ri-20px"></i>
<i class="ri-arrow-up-line ri-18px"></i>
<i class="ri-arrow-up-line ri-14px"></i>| Class | Value |
|---|---|
class="ri-{value}"
|
14px |18px |20px | 24px | 36px | 48px |
Rotation & Flipping
<i class="ri-thumb-up-fill ri-36px ri-rotate-45"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-90"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-135"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-180"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-225"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-270"></i>
<i class="ri-thumb-up-fill ri-36px ri-rotate-315"></i>
<i class="ri-thumb-up-fill ri-36px ri-flip-v"></i>
<i class="ri-thumb-up-fill ri-36px ri-flip-h"></i>| Class | Value |
|---|---|
class="ri-{value}"
|
rotate-45 | rotate-90 | rotate-135 | rotate-180 | rotate-225 | rotate-270 | rotate-315 | flip-v | flip-h |
Border
<i class="ri-trophy-line border border-2 p-2 rounded ri-36px"></i>
<i class="ri-trophy-line border border-2 p-2 rounded-circle ri-36px"></i>| Class | Description |
|---|---|
class="border border-2"
|
Use utility classes of borders and padding. Use rounded class for rounded border and use rounded-circle for circle.
|