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.
import { CDBIcon } from "cdbreact";
Default Icon
Pro ComponentThe 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.
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.
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 ComponentTo spin your icons, you can use the fab spin icon
prop.
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 ComponentTo shift the direction your prop is facing, use the fab pull
prop.
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 ComponentYou can use the fab pulse icon
prop to make your icons spin quicker than the fab spin icon
would.
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 Componentimport 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 ComponentTo indicate the angle at which your icon should be rotated, use the fab rotate
prop.
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 Componentimport 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.
Name | Type | Default | Description | Example |
---|---|---|---|---|
className | String | Adds custom classes | Adds custom classes | <CDBIcon className="myClass" ... /> |
icon | String | Required! The Font Awesome icon name, which you want to use | <CDBIcon icon="facebook" ... /> | |
border | Boolean | false | Adds border around icon | <CDBIcon border .../> |
brand | Boolean | false | Sets brand icon category; alias: fab | <CDBIcon brand icon="chevron" .../> |
fab | Boolean | false | Sets brand icon category; alias: brand | <CDBIcon fab icon="twitter" .../> |
fal | Boolean | false | Sets light icon category; alias: light | <CDBIcon fal icon="user" .../> |
far | Boolean | false | Sets light icon category; alias: regular | <CDBIcon far icon="user" .../> |
fixed | Boolean | false | Sets fixed with of icons (i.e. inside list) | <CDBIcon fixed icon="user" .../> |
flip | String | Flips icon; acceptable props: horizontal or vertical | <CDBIcon flip="vertical" icon="user" .../> | |
inverse | Boolean | false | Sets alternative icon color | <CDBIcon inverse icon="user" .../> |
light | Boolean | false | Sets light icon category; alias: fal | <CDBIcon light icon="facebook" .../> |
list | Boolean | false | Adds fa-li to the className | <CDBIcon list icon="facebook" .../> |
pull | String | Pulls icon to the right or left | <CDBIcon pull="left" icon="user" .../> | |
pulse | Boolean | false | Rotates icon in 8 steps | <CDBIcon pulse icon="facebook" .../> |
rotate | String | Rotates icon by 90 , 180 or 270 degrees | <CDBIcon rotate="90" icon="facebook" .../> | |
size | String | Increase icon size; accepts parameters: [lg , 2x , 3x , 4x , 5x ] | <CDBIcon size="5x" icon="facebook" .../> | |
spin | Boolean | false | Spins the icon, you can combine this prop with pulse | <CDBIcon spin .../> |
stack | String | Use 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

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