Search...

Icon

React Bootstrap 5 Icon

React Bootstrap 5 Icons are little images or symbols that can serve as a link, transmit information, or are merely aesthetic.

The Contrast React Bootstrap 5 Icon component allows you to use brand icons with predefined designs in your project, such as Twitter, Facebook, and Stack Overflow. However, only Pro users have access to this function.

Importing the React Bootstrap 5 Icon Component

To begin using the React Bootstrap 5 Icon component, import CDBIcon into your project.

js
import { CDBIcon } from 'cdbreact';

Default Icon

The CDBIcon component can be nestled inside another React Bootstrap 5 Component, in this case, the CDBBtn. Our buttons now have icons on them as a result of this.

js
import React from 'react';
import { CDBBtn, CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBBtn color="primary">
<CDBIcon fab icon="stack-overflow" />
click me
</CDBBtn>
<CDBBtn color="secondary">
<CDBIcon fab icon="facebook" />
click me
</CDBBtn>
<CDBBtn color="success">
<CDBIcon fab icon="reddit" />
click me
</CDBBtn>
<CDBBtn color="danger">
<CDBIcon fab icon="twitter" />
click me
</CDBBtn>
<CDBBtn color="dark">
<CDBIcon fab icon="instagram" />
click me
</CDBBtn>
<CDBBtn color="warning">
<CDBIcon fab icon="google" />
click me
</CDBBtn>
</CDBContainer>
);
};

Border Icons

To give your icons a light, thin border, try the fab border icon prop.

js
import React from 'react';
import { CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBIcon fab border icon="stack-overflow" />
<CDBIcon fab border icon="facebook" />
<CDBIcon fab border icon="reddit" />
<CDBIcon fab border icon="twitter" />
<CDBIcon fab border icon="instagram" />
<CDBIcon fab border icon="google" />
</CDBContainer>
);
};

Spin Icons

To spin your icons, you can use the fab spin icon prop.

js
import React from 'react';
import { CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBIcon fab spin icon="stack-overflow" />
<CDBIcon fab spin icon="facebook" />
<CDBIcon fab spin icon="reddit" />
<CDBIcon fab spin icon="twitter" />
<CDBIcon fab spin icon="instagram" />
<CDBIcon fab spin icon="google" />
</CDBContainer>
);
};

Pull Icons

To shift the direction your prop is facing, use the fab pull prop.

js
import React from 'react';
import { CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBIcon fab pull="left" icon="stack-overflow" />
</CDBContainer>
);
};

Pulse Icons

You can use the fab pulse icon prop to make your icons spin quicker than the fab spin icon would.

js
import React from 'react';
import { CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBIcon fab pulse icon="stack-overflow" />
<CDBIcon fab pulse icon="facebook" />
<CDBIcon fab pulse icon="reddit" />
<CDBIcon fab pulse icon="twitter" />
<CDBIcon fab pulse icon="instagram" />
<CDBIcon fab pulse icon="google" />
</CDBContainer>
);
};
## Flip Icons
js
import React from 'react';
import { CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBIcon fab flip="horizontal" icon="stack-overflow" />
<CDBIcon fab flip="vertical" icon="facebook" />
</CDBContainer>
);
};

Rotate Icons

To indicate the angle at which your icon should be rotated, use the fab rotate prop.

js
import React from 'react';
import { CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBIcon fab rotate="90" icon="stack-overflow" />
<CDBIcon fab rotate="180" icon="facebook" />
</CDBContainer>
);
};

Sizes

The 'size' prop is used to indicate how big or small the icon should be. You can use this props to change the size of your Icon.

js
import React from 'react';
import { CDBIcon, CDBContainer } from 'cdbreact';
export const Icon = () => {
return (
<CDBContainer>
<CDBIcon fab icon="facebook" size="sm" />
<CDBIcon fab icon="facebook" size="md" />
<CDBIcon fab icon="facebook" size="lg" />
<CDBIcon fab icon="facebook" size="2x" />
<CDBIcon fab icon="facebook" size="3x" />
<CDBIcon fab icon="facebook" size="4x" />
<CDBIcon fab icon="facebook" size="5x" />
</CDBContainer>
);
};

Contrast React Bootstrap 5 Icon Props

This tutorial will expand on your knowledge of the props available with the React Bootstrap 5 Icon component. You'll learn what these props do, what their default values are, and how to use them in your code.

Other prop options for the 'CDBIcon' component are included in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBIcon className="myClass" ... />
iconStringRequired! The Font Awesome icon name, which you want to use<CDBIcon icon="facebook" ... />
borderBooleanfalseAdds border around icon<CDBIcon border .../>
brandBooleanfalseSets brand icon category; alias: fab<CDBIcon brand icon="chevron" .../>
fabBooleanfalseSets brand icon category; alias: brand<CDBIcon fab icon="twitter" .../>
falBooleanfalseSets light icon category; alias: light<CDBIcon fal icon="user" .../>
farBooleanfalseSets light icon category; alias: regular<CDBIcon far icon="user" .../>
fixedBooleanfalseSets fixed with of icons (i.e. inside list)<CDBIcon fixed icon="user" .../>
flipStringFlips icon; acceptable props: horizontal or vertical<CDBIcon flip="vertical" icon="user" .../>
inverseBooleanfalseSets alternative icon color<CDBIcon inverse icon="user" .../>
lightBooleanfalseSets light icon category; alias: fal<CDBIcon light icon="facebook" .../>
listBooleanfalseAdds fa-li to the className<CDBIcon list icon="facebook" .../>
pullStringPulls icon to the right or left<CDBIcon pull="left" icon="user" .../>
pulseBooleanfalseRotates icon in 8 steps<CDBIcon pulse icon="facebook" .../>
rotateStringRotates icon by 90, 180 or 270 degrees<CDBIcon rotate="90" icon="facebook" .../>
sizeStringIncrease icon size; accepts parameters: [lg, 2x, 3x, 4x, 5x]<CDBIcon size="5x" icon="facebook" .../>
spinBooleanfalseSpins the icon, you can combine this prop with pulse<CDBIcon spin .../>
stackStringUse class fa-stack on wrapper to stack multiple icons; use 1x for regular sized icon and 2x for larger one<span className="fa-stack" ...> <CDBIcon far icon="square" stack="2x" .../> <CDBIcon fab icon="twitter" stack="1x" .../> <.../span>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner