Icons

We are using three different icon libraries for icons.
Read the official Font Awesome, Boxicons Documentations 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

Boxicons

Boxicons is a simple vector icons set carefully crafted for designers and developers to use in your next project.

Info: You can check complete list of box icons from https://boxicons.com.

We have already included boxicons in template so you don't have to worry about including any files. Check below mentioned path to find boxicons' location in your template.

<link rel="stylesheet" href="assets/vendor/fonts/boxicons.css" />

Basic Usage

<i class="bx bx-trophy bx-md"></i>
Class Value
class="bx bx-{value}" ICON_NAME

Sizing

<i class="bx bx-upvote bx-lg"></i>
<i class="bx bx-upvote bx-md"></i>
<i class="bx bx-upvote bx-sm"></i>
<i class="bx bx-upvote bx-xs"></i>
Class Value
class="bx-{value}" xs | sm | md | lg

Rotation & Flipping

<i class="bx bx-crown bx-rotate-90"></i>
<i class="bx bx-crown bx-rotate-180"></i>
<i class="bx bx-crown bx-rotate-270"></i>
<i class="bx bx-crown bx-flip-vertical"></i>
<i class="bx bx-crown bx-flip-horizontal"></i>
Class Value
class="bx-{value}" rotate-90 | rotate-180 | rotate-270 | flip-horizontal | flip-vertical

Border

<i class="bx bx-trophy bx-border"></i>
<i class="bx bx-trophy bx-border-circle"></i>
Class Value
class="bx-{value}" border | border-circle

Animations

<i class="bx bx-loader bx-spin"></i>
<i class="bx bxs-bell bx-tada"></i>
<i class="bx bx-error bx-flashing"></i>
<i class="bx bx-radio-circle bx-burst"></i>
<i class="bx bx-left-arrow-circle bx-fade-left"></i>
<i class="bx bx-right-arrow-circle bx-fade-right"></i>
<i class="bx bx-upvote bx-fade-up"></i>
<i class="bx bx-downvote bx-fade-down"></i>
Class Value
class="bx-{value}" spin | tada | flashing | burst | fade-left | fade-right | fade-up | fade-down

Hover Animations

<i class="bx bx-loader bx-spin-hover"></i>
<i class="bx bx-bell bx-tada-hover"></i>
<i class="bx bx-error bx-flashing-hover"></i>
<i class="bx bx-radio-circle bx-burst-hover"></i>
<i class="bx bx-left-arrow-circle bx-fade-left-hover"></i>
<i class="bx bx-right-arrow-circle bx-fade-right-hover"></i>
<i class="bx bx-upvote bx-fade-up-hover"></i>
<i class="bx bx-downvote bx-fade-down-hover"></i>
Class Value
class="bx-{value}" spin-hover | tada-hover | flashing-hover | burst-hover | fade-left-hover | fade-right-hover | fade-up-hover | fade-down-hover

Font Awesome

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

Info: You can check complete list of Font Awesome icons from https://fontawesome.com

We have already included Font Awesome 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/fontawesome.css" />

Basic Usage

<i class="fab fa-jenkins fa-3x"></i>
Class Value
class="fa-{value}" ICON_NAME

Sizing

<i class="fab fa-odnoklassniki fa-10x"></i>
<i class="fab fa-odnoklassniki fa-7x"></i>
<i class="fab fa-odnoklassniki fa-5x"></i>
<i class="fab fa-odnoklassniki fa-3x"></i>
<i class="fab fa-odnoklassniki fa-2x"></i>
<i class="fab fa-odnoklassniki fa-lg"></i>
<i class="fab fa-odnoklassniki fa-sm"></i>
<i class="fab fa-odnoklassniki fa-xs"></i>
Class Value
class="fa-{value}" xs | sm | lg | 2x | 3x | 5x | 7x | 10x

Rotation & Flipping

<i class="fab fa-sticker-mule fa-rotate-90"></i>
<i class="fab fa-sticker-mule fa-rotate-180"></i>
<i class="fab fa-sticker-mule fa-rotate-270"></i>
<i class="fab fa-sticker-mule fa-flip-horizontal"></i>
<i class="fab fa-sticker-mule fa-flip-vertical"></i>
<i class="fab fa-sticker-mule fa-flip-both"></i>
Class Value
class="fa-{value}" fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical | fa-flip-both

Border

<i class="fa fa-medapps fa-border"></i>
Class Value
class="fa-{value}" border

Animations

<i class="fa fa-circle-notch fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
Class Value
class="fa-{value}" spin | pulse
© 2017- Pixinvent, Hand-crafted & Made with ❤️