Reactstrap Icons

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

Nucleo

Argon Design System React comes with 100 custom icons made by our friends from Nucleo App. The official package contains over 25000 icons which are looking great in combination with Argon Design System React. Make sure you check all of them and use those that you like the most.

Usage

In order to use this icons on your project you will need to import them inside your mounting point, in our case it is the src/index.js file:

import "assets/css/nucleo-svg.css";
import "assets/css/nucleo-icons.css";

Also, please note that we’ve kept our nucleo icons files inside src/assets/css/*, hence the above import path. If you’ve changed their location, you will need to add the new path inside your import statement.

Initialization

Start placing icons in your React components. We recommend using a consistent HTML element, like <i>. Find the right icon and learn how to reference it in your markup.

You need to know two bits of information to reference an icon:

1. its name, prefixed with ni ni- and
2. the style you want to use’s corresponding prefix.

import React from "react";


function Example(){
  return (
    <>
      <i className="ni ni-air-baloon"></i>
    </>
  );
}

export default Example;

Icons

Font Awesome 5

Optionally, Argon Design System React comes with Font Awesome which means 3000+ more vector icons made for you to use.

Usage

In order to use this icons on your project you will need to import them inside your mounting point, in our case it is the src/index.js file:

import "@fortawesome/fontawesome-free/css/all.min.css";

Also, please note that we’ve decided not to download the fontawesome package as static files, but we’ve installed them via npm.

Initialization

Start placing icons in your React components. We recommend using a consistent HTML element, like <i>. Find the right icon and learn how to reference it in your markup.

You need to know two bits of information to reference an icon:

1. its name, prefixed with fa{type} fa- and
2. the style you want to use’s corresponding prefix.

NOTE: {type} can be one of s (solid), r (regular), l (light), d (duotone), or b (brands).

import React from "react";


function Example(){
  return (
    <>
      <i className="fas fa-heart"></i>
    </>
  );
}

export default Example;

Icons

Get the icon you need on the official website:

Go to Font Awesome

Bootstrap Glyphicons

Another option for icons are Glyphicons.

But please note that we have not styled these ones.