Icon

Icon is an element which is used for dismissing components like modals and alerts. See how easy implementation is.

Examples

Default Icon example.

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

Pro Component

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

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

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

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

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

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

Pro Component

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

API

In this section you will find advanced information about the Icon component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Icon Import Statement

You need to import the Contrast Icon component first before using it.

import { CDBIcon, CDBBtn, CDBContainer } from "cdbreact";

API Reference: Contrast Icon Properties

The table below shows the configuration options of the CDBIcon component.

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>

Collapse

DropDown