🤩
Windframe Import Update is finally here.

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

Pro Component

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.

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

Pro Component

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

Pro Component

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

Pro Component

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

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

Pro Component

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.

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

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast