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

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.

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

To 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

To 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

You 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

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.

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.

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.

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>

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.

Footer

Collapse