Icons

We are using Remix icon library for icons.
Read the official Remix Icon's Documentation for a full list of instructions and other options.

Info: We may have used margin utilities and icon size classes for demo purpose in documentation

Remix Icons

Remix Icon is a simple yet beautifully created icons for designers and developers to use in your next project.

Info: You can check complete list of Remix icons from https://remixicon.com/.

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

<i class="ri-focus-2-line ri-36px"></i>
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.

Spin Animation

<i class="ri-loader-5-line ri-spin ri-36px"></i>
Class Value
class="ri-{value}" spin
© 2017- ThemeSelection, Hand-crafted & Made with ❤️