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 size prop with xs, sm, lg (33% increase), or use literal sizes (to scale it from 1x to 10x) 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x. 

        
            
          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' />
              </>
            );
          }

You can make all your icons the same width so they can easily vertically align, like in a list or navigation menu.

Pass fixed on icon to set one or more icons to the same fixed width. This is great to use when varying icon widths (e.g. a tall but skinny icon atop a wide but short icon) would throw off vertical alignment. For clarity in the following example, we’ve added a background color on the icon so you can see the fixed width and also bumped up the font-size of the parent element.

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
        
            
          import React from 'react';
          import { MDBIcon } from 'mdb-react-ui-kit';

          export default function App() {
            return (
              <div style={{ fontSize: '2rem' }}>
                <div>
                  <MDBIcon 
                    className='ms-1 ' 
                    icon='skating' 
                    style={{ background: 'DodgerBlue' }} 
                    fixed 
                    iconType='solid' 
                  />{' '}
                  Skating
                </div>
                <div>
                  <MDBIcon 
                    className='ms-1 ' 
                    icon='skiing' 
                    style={{ background: 'SkyBlue' }} 
                    fixed 
                    iconType='solid' 
                  />{' '}
                  Skiing
                </div>
                <div>
                  <MDBIcon 
                    className='ms-1 ' 
                    icon='skiing-nordic' 
                    style={{ background: 'DodgerBlue' }} 
                    fixed 
                    iconType='solid' 
                  />{' '}
                  Nordic Skiing
                </div>
                <div>
                  <MDBIcon 
                    className='ms-1 ' 
                    icon='snowboarding' 
                    style={{ background: 'SkyBlue' }} 
                    fixed 
                    iconType='solid' 
                  />{' '}
                  Snowboarding
                </div>
                <div>
                  <MDBIcon 
                    className='ms-1 ' 
                    icon='snowplow' 
                    style={{ background: 'DodgerBlue' }} 
                    fixed 
                    iconType='solid' 
                  />{' '}
                  Snowplow
                </div>
              </div>
            );
          }

Icons - API

Import

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

Properties

MDBIcon

Name Type Default Description Example
animate '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 />
style React.CSSProperties '' Add custom styles to MDBIcon element <MDBIcon far icon="ad" style={customStyle} />
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" />