logologo-dark

Icon Libraries

We've included few popular icon libraries into DashLite. It helps you to use easily.

Please Note: By default any of third-party icon library is not added globally, so if you want to use these icon library then please do not forgot to link. You will find uses information in very bottom of this page.

FontAwesome 5 Free

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
For a complete list of FontAwesome icons, please check FontAwesome Official Website

  • heartCopied
  • chart-barCopied
  • comment-dotsCopied
  • envelope-openCopied
  • folder-openCopied
  • hand-scissorsCopied
  • keyboardCopied
  • object-ungroupCopied
  • paper-planeCopied
  • snowflakeCopied
  • starCopied
  • facebookCopied
Code Example
<em class="far fa-heart"></em><em class="fas fa-star"></em><em class="fab fa-facebook"></em>

Themify Icons

Themify Icons is a complete set of icons for use in web design and apps, hand-crafted icons that draw inspiration from Apple iOS 7.
For a complete list of Themify icons, please check Themify Official Website

  • heartCopied
  • comment-altCopied
  • cameraCopied
  • paletteCopied
  • truckCopied
  • map-altCopied
  • headphoneCopied
  • basketballCopied
  • vectorCopied
  • stampCopied
  • starCopied
  • rocketCopied
Code Example
<em class="ti ti-heart"></em><em class="ti ti-star"></em>

Bootstrap Icons

Free, high quality, open source icon library from Bootstrap Team
For a complete list of Bootstrap icons, please check Bootstrap Official Website

  • heartCopied
  • alarmCopied
  • cameraCopied
  • bar-chart-lineCopied
  • truckCopied
  • basketCopied
  • binocularsCopied
  • bounding-boxCopied
  • bracesCopied
  • bugCopied
  • starCopied
  • chat-right-dotsCopied
Code Example
<em class="bi bi-heart"></em><em class="bi bi-star"></em>

Uses Instruction

As Nioicon is our template default icon font so you will need take additional step as below to use third-party icon library.

Link into Head Tag

You can simply add <link> into <head> tag on each page as below reference.

<!-- FontAwesome Icons -->
<link rel="stylesheet" type="text/css" href="./assets/css/libs/fontawesome-icons.css">

<!-- Themify Icons -->
<link rel="stylesheet" type="text/css" href="./assets/css/libs/themify-icons.css">

<!-- Bootstrap Icons -->
<link rel="stylesheet" type="text/css" href="./assets/css/libs/bootstrap-icons.css">
Compile with SCSS

Alternatively, you can include globally from scss file to reduce request and load directly. So, you will need to edit the /scss/vendor/bundle.scss file and active relevant code block as below. You must need to re-complie scss file after any change made.

// You just need to uncomment relavent library codes and recomplile.

//FontAwesome Icons
$fa-font-path: "../fonts";
@import "fontawesome/fontawesome.scss";
@import "fontawesome/brands.scss";
@import "fontawesome/regular.scss";
@import "fontawesome/solid.scss";

//Themify Icons
$ti-font-path : "../fonts";
@import "themify-icons/themify-icons";

//Bootstrap Icons
$bi-font-path : "../fonts";
@import "bootstrap-icons/bootstrap-icons";
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?