Icon boxes

Use the icon boxes components to create featured cards using a representitive icon

Example

Use the following basic example of an icon box element:

Round Shape

<div class="icon icon-shape icon-shape-secondary rounded-circle">
    <span class="far fa-lightbulb"></span>
</div>
<h2 class="h5 my-3">Round Shape</h2>

Square shape

The following example is a square shaped icon:

Square Shape

<div class="icon icon-shape icon-shape-secondary">
    <span class="fas fa-bomb"></span>
</div>
<h2 class="h5 my-3">Square Shape</h2>

Organic shape

The following example is a organic shaped icon:

Organic Shape

<div class="icon icon-shape icon-shape-secondary organic-radius">
    <span class="far fa-dizzy"></span>
</div>
<h2 class="h5 my-3">Organic Shape</h2>

Transparent

Simple Icon

<div class="icon icon-primary">
    <span class="fas fa-burn"></span>
</div>
<h3 class="h5 my-3">Simple Icon</h3>

Sizing

Use the modified classes icon-lg, icon-sm to update the size of the icon box:

Icon Large

Default Icon

Icon Small

<div class="col-12 col-sm-4 col-lg-3 mb-4 mb-lg-0">
    <div class="icon icon-shape icon-lg icon-shape-secondary">
        <span class="fas fa-globe-europe"></span>
    </div>
    <h2 class="h5 my-3">Icon Large</h2>
</div>
<div class="col-12 col-sm-4 col-lg-3 mb-4 mb-lg-0">
    <div class="icon icon-shape icon-shape-secondary">
        <span class="fas fa-globe-europe"></span>
    </div>
    <h2 class="h5 my-3">Default Icon</h2>
</div>
<div class="col-12 col-sm-4 col-lg-3 mb-4 mb-lg-0">
    <div class="icon icon-shape icon-sm icon-shape-secondary">
        <span class="fas fa-globe-europe"></span>
    </div>
    <h2 class="h5 my-3">Icon Small</h2>
</div>

Side icons

Left Icon

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Right Icon

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

<div class="row">
    <div class="col-12 col-md-6 mb-4 mb-lg-0">
        <div class="d-flex px-3">
            <div>
                <div class="icon icon-sm icon-secondary">
                    <span class="fas fa-chess-rook"></span>
                </div>
            </div>
            <div class="ps-4">
                <h3 class="h5">Left Icon</h3>
                <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 mb-4 mb-lg-0">
        <div class="d-flex px-3">
            <div class="me-4 text-right">
                <h3 class="h5">Right Icon</h3>
                <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
            </div>
            <div>
                <div class="icon icon-sm icon-secondary">
                    <span class="fas fa-chess-rook"></span>
                </div>
            </div>
        </div>
    </div>
</div>

Card icon box

Ideas and Concepts

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Learn more

<div class="card shadow p-1 p-md-4 mb-4 mb-lg-0">
    <div class="card-body">
        <div class="icon icon-shape icon-shape-primary rounded-circle mb-4">
            <span class="far fa-lightbulb"></span>
        </div>
        <h3 class="h5 mb-3">Ideas and Concepts</h3>
        <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
        <a href="#" class="btn btn-sm btn-primary animate-up-1">Learn more</a>
    </div>
</div>