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 'beat' | 'fade' | 'beat-fade' | 'bounce' | 'shake' | 'flip' | 'spin' | 'pulse' '' Add animation MDBIcon <MDBIcon icon="camera" animate='bounce' />
className string '' Add custom class to MDBIcon <MDBIcon icon="camera" className="class" />
icon string '' Defines an icon <MDBIcon icon="camera" />
iconType string '' Defines icon type <MDBIcon iconType='solid' />
color 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'light' | 'dark' | 'muted' | 'white' | 'info' | 'body' | 'black-50' | 'white-50' '' Sets a color of the icon <MDBIcon fab icon="twitter" color="secondary" />
border boolean false Adds border around icon <MDBIcon fab icon="twitter" border />
flag string '' Transforms an icon into the flag <MDBIcon flag="ae" />
fab boolean false Sets brand icon category <MDBIcon fab icon="twitter" />
fal boolean false Sets light icon category <MDBIcon fal icon="user" />
far boolean false Sets regular icon category <MDBIcon far icon="user" />
fas boolean '' Sets solid icon category <MDBIcon far icon="ad" />
fixed boolean false Sets fixed with of icons (f.e. inside list) <MDBIcon far icon="ad" fixed />
flip 'horizontal' | 'vertical' | 'both' '' Flips icon; acceptable props: horizontal or vertical <MDBIcon far icon="ad" flip="horizontal" />
inverse boolean false Sets alternative icon color <MDBIcon far icon="ad" inverse />
list boolean false Use inside list with class fa-ul to replace bullets with icons <MDBIcon far icon="ad" list />
pull 'left' | 'right' '' Pulls icon to the right or left <MDBIcon far icon="ad" pull="right" />
pulse boolean false Rotates icon in 8 steps <MDBIcon far icon="ad" pulse />
rotate '90' | '180' | '270' | 'by' '' Rotates icon by 90, 180 or 270 degrees <MDBIcon far icon="ad" rotate="270" />
size | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' '' Increase icon size <MDBIcon far icon="ad" icon="lg" />
spin boolean false Spins the icon, you can combine this prop with pulse <MDBIcon far icon="ad" spin />
stack 1x' | '2x' '' 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" />