Rate this docs

React Bootstrap Icons

React Icons - Bootstrap 4 & Material Design

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, 628 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 loves screen readers and helps make your icons accessible on the web.

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.



                <MDBIcon icon="camera-retro"/> fa-camera-retro

            
  • 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.


                <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
            
  • 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.


                <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>
            

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.


                <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>
            

Buttons

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


        <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 icon="diamond" 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>
      

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.

International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


          import React from "react";
          import { MDBRow, MDBCol, MDBIcon } from "mdbreact";
          
          const FeaturesPage = () => {
            return (
              <section className="my-5">
                <h2 className="h1-responsive font-weight-bold text-center my-5">
                  Why is it so great?
                  </h2>
                <p className="lead grey-text w-responsive text-center mx-auto mb-5">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                  ad minim veniam.
                  </p>
          
                <MDBRow>
                  <MDBCol md="4">
                    <MDBRow className="mb-3">
                      <MDBCol size="2">
                        <MDBIcon
                          icon="flag-checkered"
                          size="2x"
                          className="deep-purple-text"
                        />
                      </MDBCol>
                      <MDBCol size="10">
                        <h5 className="font-weight-bold mb-3">International</h5>
                        <p className="grey-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Reprehenderit maiores nam, aperiam minima assumenda deleniti
                          hic.
                          </p>
                      </MDBCol>
                    </MDBRow>
                    <MDBRow className="mb-3">
                      <MDBCol size="2">
                        <MDBIcon icon="flask" size="2x" className="deep-purple-text" />
                      </MDBCol>
                      <MDBCol size="10">
                        <h5 className="font-weight-bold mb-3">Experimental</h5>
                        <p className="grey-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Reprehenderit maiores nam, aperiam minima assumenda deleniti
                          hic.
                          </p>
                      </MDBCol>
                    </MDBRow>
                    <MDBRow className="mb-3">
                      <MDBCol size="2">
                        <MDBIcon icon="glass" size="2x" className="deep-purple-text" />
                      </MDBCol>
                      <MDBCol size="10">
                        <h5 className="font-weight-bold mb-3">Relaxing</h5>
                        <p className="grey-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Reprehenderit maiores nam, aperiam minima assumenda deleniti
                          hic.
                          </p>
                      </MDBCol>
                    </MDBRow>
                  </MDBCol>
                  <MDBCol md="4" className="text-name">
                    <img
                      className="img-fluid"
                      src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png"
                      alt=""
                    />
                  </MDBCol>
                  <MDBCol md="4">
                    <MDBRow className="mb-3">
                      <MDBCol size="2">
                        <MDBIcon icon="heart" size="2x" className="deep-purple-text" />
                      </MDBCol>
                      <MDBCol size="10">
                        <h5 className="font-weight-bold mb-3">Beloved</h5>
                        <p className="grey-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Reprehenderit maiores nam, aperiam minima assumenda deleniti
                          hic.
                          </p>
                      </MDBCol>
                    </MDBRow>
                    <MDBRow className="mb-3">
                      <MDBCol size="2">
                        <MDBIcon icon="flash" size="2x" className="deep-purple-text" />
                      </MDBCol>
                      <MDBCol size="10">
                        <h5 className="font-weight-bold mb-3">Rapid</h5>
                        <p className="grey-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Reprehenderit maiores nam, aperiam minima assumenda deleniti
                          hic.
                          </p>
                      </MDBCol>
                    </MDBRow>
                    <MDBRow className="mb-3">
                      <MDBCol size="2">
                        <MDBIcon icon="magic" size="2x" className="deep-purple-text" />
                      </MDBCol>
                      <MDBCol size="10">
                        <h5 className="font-weight-bold mb-3">Magical</h5>
                        <p className="grey-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Reprehenderit maiores nam, aperiam minima assumenda deleniti
                          hic.
                          </p>
                      </MDBCol>
                    </MDBRow>
                  </MDBCol>
                </MDBRow>
              </section>
            );
          }
          
          export default FeaturesPage;
      

Rotated & Flipped

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

To arbitrarily rotate and flip icons, use the rotate="*" and flip="*".


                <MDBIcon icon="shield" /> normal<br />
                <MDBIcon icon="shield" rotate="90" /> fa-rotate-90<br />
                <MDBIcon icon="shield" rotate="180" /> fa-rotate-180<br />
                <MDBIcon icon="shield" rotate="270" /> fa-rotate-270<br />
                <MDBIcon icon="shield" flip="horizontal" /> fa-flip-horizontal<br />
                <MDBIcon icon="shield" flip="vertical" /> fa-flip-vertical
          

Animated Icons

Loading... Loading... Loading... Loading... Loading...

Use the spin attribute to get any icon to rotate, and use pulse to have it rotate with 8 steps. Works well with spinner, refresh, and cog.


                <MDBIcon icon="spinner" spin size="3x" fixed />
                <span className="sr-only">Loading...</span>
        
                <MDBIcon icon="circle-o-notch" spin size="3x" fixed />
                <span className="sr-only">Loading...</span>
        
                <MDBIcon icon="refresh" spin size="3x" fixed />
                <span className="sr-only">Loading...</span>
        
                <MDBIcon icon="cog" spin size="3x" fixed />
                <span className="sr-only">Loading...</span>
        
                <MDBIcon icon="spinner" pulse size="3x" fixed />
                <span className="sr-only">Loading...</span>
            

Note: Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.

Note: CSS3 animations aren't supported in IE8 - IE9.


Bordered & Pulled Icons

...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Use border and pull="right" or pull="left" for easy pull quotes or article icons.


                ...tomorrow we will run faster, stretch out our arms farther...
                And then one fine morning— So we beat on, boats against the
                current, borne back ceaselessly into the past.
                <MDBIcon icon="quote-left" size="1x" pull="left" border />
                ...tomorrow we will run faster, stretch out our arms farther...
                And then one fine morning— So we beat on, boats against the
                current, borne back ceaselessly into the past.
              

Fixed Width Icons

Use fixed to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.


                <MDBListGroup >
                    <MDBListGroupItem><MDBIcon icon="home" fixed />  Home</MDBListGroupItem>
                    <MDBListGroupItem><MDBIcon icon="book" fixed />  Library</MDBListGroupItem>
                    <MDBListGroupItem><MDBIcon icon="pencil" fixed />  Applications</MDBListGroupItem>
                    <MDBListGroupItem><MDBIcon icon="cog" fixed />  Settings</MDBListGroupItem>
                  </MDBListGroup>
            

List Icons

  • List icons
  • can be used
  • as bullets
  • in lists

Use fa-ul and list to easily replace default bullets in unordered lists.


              <ul className="fa-ul">
                <li><MDBIcon icon="check-square" list />  List icons</li>
                <li><MDBIcon icon="check-square" list />  can be used</li>
                <li><MDBIcon icon="spinner" list spin />  as bullets</li>
                <li><MDBIcon icon="square" list />  in lists</li>
              </ul>
            

Full list

To see the full list of available icons click the button below

React Icon - API

In this section you will find advanced information about the Icon component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


        import { MDBIcon } from "mdbreact";
      

API Reference: Icon Properties

The table below shows the configuration options of the MDBIcon component.

Name Type Default Description Example
border Boolean false Adds border around icon <MDBIcon border >
className String Adds custom classes <MDBIcon className="customClass" >
fixed Boolean false Sets fixed with of icons (f.e. inside list) <MDBIcon fixed >
flip String Flips icon; acceptable props: horizontal or vertical <MDBIcon flip="horizontal" >
icon String Required! The Fontawesome icon name, which you want to use Icons list <MDBIcon icon="chevron" >
inverse Boolean false Sets alternative icon color <MDBIcon inverse >
list Boolean false Use inside list with class fa-ul to replace bullets with icons <MDBListGroup className="fa-list"> <MDBIcon list /> </MDBListGroup>
pull String Pulls icon to the right or left <MDBIcon pull="right" >
pulse Boolean false Rotates icon in 8 steps <MDBIcon pulse >
rotate String Rotates icon by 90, 180 or 270 degrees <MDBIcon rotate="270" >
size String Increse icon size; accepts parameters: [lg, 2x, 3x, 4x, 5x] <MDBIcon size="3x" >
spin Boolean false Spins the icon, you can combine this prop with pulse <MDBIcon spin >
stack String Use class fa-stack on wrapper to stack multiple icons; use 1x for regulary sized icon and 2x for larger one <span className="fa-stack"> <MDBIcon icon="square-o" stack="2x" /> <MDBIcon icon="twitter" stack="1x" /> </span>