Icons

React Bootstrap 5 Icons component


Basic usage

You can place icons just about anywhere using MDBIcon and an icon name in the icon property. Icons are designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).


        import React from 'react';
        import { MDBIcon } from 'mdb-react-ui-kit';

        export default function App() {
          return (
            <MDBIcon icon='camera-retro' />
          );
        }
      

To increase icon sizes relative to their container, use the fa-xs, fa-sm, fa-lg (33% increase), fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x values for "size" property.


        import React from 'react';
        import { MDBIcon } from 'mdb-react-ui-kit';

        export default function App() {
          return (
            <>
              <MDBIcon icon='camera' size='xs' />
              <MDBIcon className='ms-1' icon='camera' size='sm' />
              <MDBIcon className='ms-1' icon='camera' size='lg' />
              <MDBIcon className='ms-1' icon='camera' size='2x' />
              <MDBIcon className='ms-1' icon='camera' size='3x' />
              <MDBIcon className='ms-1' icon='camera' size='4x' />
              <MDBIcon className='ms-1' icon='camera' size='5x' />
              <MDBIcon className='ms-1' icon='camera' size='6x' />
              <MDBIcon className='ms-1' icon='camera' size='7x' />
              <MDBIcon className='ms-1' icon='camera' size='8x' />
              <MDBIcon className='ms-1' icon='camera' size='9x' />
              <MDBIcon className='ms-1' icon='camera' size='10x' />
            </>
          );
        }
      

Icons - API


Import


        import { MDBIcon } from 'mdb-react-ui-kit';
      

Properties

MDBIcon

Name Type Default Description Example
className String '' Add custom class to MDBIcon <MDBIcon icon="camera" className="class" />
icon String '' Defines an icon <MDBIcon icon="camera" />
color String '' Sets a color of the icon <MDBIcon fab icon="twitter" color="secondary" />
border Boolean '' Adds border around icon <MDBIcon fab icon="twitter" border />
flag String '' Transforms an icon into the flag <MDBIcon flag="ae" />
fab Boolean '' Sets brand icon category <MDBIcon fab icon="twitter" />
fal Boolean '' Sets light icon category <MDBIcon fal icon="user" />
far Boolean '' Sets regular icon category <MDBIcon far icon="user" />
fas Boolean '' Sets solid icon category <MDBIcon far icon="ad" />
fixed Boolean '' Sets fixed with of icons (f.e. inside list) <MDBIcon far icon="ad" fixed />
flip String '' Flips icon; acceptable props: horizontal or vertical <MDBIcon far icon="ad" flip="horizontal" />
inverse Boolean '' Sets alternative icon color <MDBIcon far icon="ad" inverse />
list Boolean '' Use inside list with class fa-ul to replace bullets with icons <MDBIcon far icon="ad" list />
pull String '' Pulls icon to the right or left <MDBIcon far icon="ad" pull="right" />
pulse Boolean '' Rotates icon in 8 steps <MDBIcon far icon="ad" pulse />
rotate String '' Rotates icon by 90, 180 or 270 degrees <MDBIcon far icon="ad" rotate="270" />
size String '' Increase icon size <MDBIcon far icon="ad" icon="lg" />
spin Boolean '' Spins the icon, you can combine this prop with pulse <MDBIcon far icon="ad" spin />
stack Boolean '' Use class fa-stack on wrapper to stack multiple icons; use 1x for regular sized icon and 2x for larger one <MDBIcon far icon="ad" stack="2x" />