React Bootstrap Icons

React Icons - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap icons usage is a quick tutorial which describes the proper way of using Font Awesome icons in Bootstrap framework.

MDB uses a powerful set of icons called Font Awesome.

One Font, 1500+ Icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

No JavaScript Required

Fewer compatibility concerns because Font Awesome doesn't require JavaScript.

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

Free, as in Speech

Font Awesome is completely free for commercial use.

CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Perfect on Retina Displays

Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Accessibility-minded

Font Awesome screen readers and helps make your icons accessible on the web.

Font Awesome version 5 has been re-written and re-designed completely from scratch.

What’s Changed

3 Different Icon Styles - every icon is introduced in a solid, regular, and light style. Brand icons are separated into their own style/category for easier use. Version 5 has four prefixes to let us set the style of any icon easily:

New Prefix	Icon Style	SVG + JS Filename	Web Font Filename	Availability
`fab`	Font Awesome Brands	`brands.js`	`fa-brands-400.*`	Free
`fas` or `fa`	Font Awesome Solid	`solid.js`	`fa-solid-900.*`	Free
`far`	Font Awesome Regular	`regular.js`	`fa-regular-400.*`	Free/Pro. In the free version 151 icons are available.
`fal`	Font Awesome Light	`light.js`	`fa-light-300.*`	Pro only
`fad`	Font Awesome Duotone	`duotone.js`	`fa-duotone-900.*`	Pro only

Icon Name Changes - Aliases have been removed in version 5, each icon has one official name and some of those names have been adjusted under new standard and conventions.
Outline Style Icons - Similarly, all icons that had an outlined style (and usually ended with -o) now have a prefix of far and have had their -o suffix removed.

We have implemented corresponding properties in our MDBIcon component. To find and fast implement your desired icon use our icon list with search tool.

Basic usage

Example: basic icon fa-camera-retro

You can place Font Awesome icons just about anywhere using the <MDBIcon> component and prop icon with the icon's name. Font Awesome is designed to be used with inline elements.

Show code

        
            
              import React from "react";
              import { MDBIcon } from 'mdbreact';

              const IconsPage = () => {
                return (
                  <MDBIcon icon="camera-retro"/> fa-camera-retro
                );
              }
    
              export default IconsPage;

Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same thing goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger icons

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the size="lg" (33% increase), size="2x", size="3x", size="4x", or size="5x" props.

Show code

        
            
                import React from "react";
                import { MDBIcon } from 'mdbreact';

                const IconsPage = () => {
                  return (
                    <>
                      <MDBIcon icon="camera-retro" size="lg"/> fa-lg
                      <MDBIcon icon="camera-retro" size="2x"/> fa-2x
                      <MDBIcon icon="camera-retro" size="3x"/> fa-3x
                      <MDBIcon icon="camera-retro" size="4x"/> fa-4x
                      <MDBIcon icon="camera-retro" size="5x"/> fa-5x
                    </>
                  );
                }
      
                export default IconsPage;

If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Colors

amber-text

red-text

indigo-text

cyan-text

green-text

To see all colors options, go to colors list.

Show code

        
            
                import React from "react";
                import { MDBIcon } from 'mdbreact';

                const IconsPage = () => {
                  return (
                    <>
                      <p><MDBIcon icon="bolt" size="3x" className="amber-text pr-3" />amber-text</p>
                      <p><MDBIcon icon="bug" size="3x" className="red-text pr-3" />red-text</p>
                      <p><MDBIcon icon="heart" size="3x" className="indigo-text pr-3" />indigo-text</p>
                      <p><MDBIcon icon="bell" size="3x" className="cyan-text pr-3" />cyan-text</p>
                      <p><MDBIcon icon="birthday-cake" size="3x" className="green-text pr-3" />green-text</p>
                    </>
                  );
                }
      
                export default IconsPage;

Margins

ml-3

mr-3

mx-4

my-4

m-5

You can add spacing to your icons from the top, bottom, right, left or all sides. Look at here to see all possibilities.

Show code

        
            
                import React from "react";
                import { MDBIcon } from 'mdbreact';

                const IconsPage = () => {
                  return (
                    <>
                      <p><MDBIcon icon="gift" size="2x" className="pink-text ml-3" />ml-3</p>
                      <p><MDBIcon icon="gift" size="2x" className="pink-text mr-3" />mr-3</p>
                      <p><MDBIcon icon="gift" size="2x" className="pink-text mr-4" />mr-4</p>
                      <p><MDBIcon icon="gift" size="2x" className="pink-text my-4" />my-4</p>
                      <p><MDBIcon icon="gift" size="2x" className="pink-text m-5" />m-5</p>
                    </>
                  );
                }
      
                export default IconsPage;

Buttons

It's good to improve the appearance of your buttons with icons. Look at here to see the other buttons options.

Show code

        
            
          import React from "react";
          import { MDBIcon, MDBBtn } from 'mdbreact';

          const IconsPage = () => {
            return (
              <>
                <MDBBtn floating size="lg" gradient="purple"><MDBIcon icon="bolt" /></MDBBtn>
                <MDBBtn rounded size="lg" color="info" >Button<MDBIcon icon="heart" className="ml-2" /></MDBBtn>
                <MDBBtn rounded outline color="info" ><MDBIcon far icon="gem" className="mr-2" />Button</MDBBtn>
                <MDBBtn size="md" color="indigo" >Button<MDBIcon icon="thumbs-up" className="ml-2" /></MDBBtn>
                <MDBBtn outline rounded size="sm" color="warning" ><MDBIcon icon="user" className="mr-2" />Button</MDBBtn>
              </>
            );
          }

          export default IconsPage;

Features

Icons are very useful when you want to show the features of something. Look at here to see more our features sections.

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.