Icon boxes Pro

Use icon boxes to indicate multiple features

Icon boxes

Round Shape
Square Shape
Organic Shape
Simple Icon
<div class="row">
    <div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
        <!-- Icon box -->
        <div class="icon icon-shape icon-shape-secondary rounded-circle">
            <span class="far fa-lightbulb"></span>
        </div>
        <h5 class="my-3">Round Shape</h5>
        <!-- End of Icon box -->
    </div>
    <div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
        <!-- Icon box -->
        <div class="icon icon-shape icon-shape-secondary">
            <span class="fas fa-bomb"></span>
        </div>
        <h5 class="my-3">Square Shape</h5>
        <!-- End of Icon box -->
    </div>
    <div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
        <!-- Icon box -->
        <div class="icon icon-shape icon-shape-secondary organic-radius">
            <span class="far fa-dizzy"></span>
        </div>
        <h5 class="my-3">Organic Shape</h5>
        <!-- End of Icon box -->
    </div>
    <div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
        <!-- Icon box -->
        <div class="icon icon-primary">
            <span class="fas fa-burn"></span>
        </div>
        <h5 class="my-3">Simple Icon</h5>
        <!-- End of Icon box -->
    </div>
</div>

Icon boxes sizing

Use icon-lg or icon-sm to make the size larger or smaller:

Icon Large
Default Icon
Icon Small
<div class="row">
    <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>
        <h5 class="my-3">Icon Large</h5>
    </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>
        <h5 class="my-3">Default Icon</h5>
    </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>
        <h5 class="my-3">Icon Small</h5>
    </div>
</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-sm-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="pl-4">
                <h5>Left Icon</h5>
                <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-sm-6 mb-4 mb-lg-0">
        <div class="d-flex px-3">
            <div class="pr-4 text-right">
                <h5>Right Icon</h5>
                <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 icons

Ideas and Concepts

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

Read more
Powerful Techniques

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

Read more
<div class="row">
    <div class="col-12 col-sm-6">
        <div class="card border-light 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>
                <h5 class="mb-3">Ideas and Concepts</h5>
                <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">Read more</a>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="card border-light p-1 p-md-4 mb-4 mb-lg-0">
            <div class="card-body">
                <div class="icon icon-shape icon-shape-primary rounded mb-4">
                    <span class="fas fa-chess-queen"></span>
                </div>
                <h5 class="mb-3">Powerful Techniques</h5>
                <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">Read more</a>
            </div>
        </div>
    </div>
</div>

Card icons 2

100% Satisfaction

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

Read More
100% Satisfaction

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

Read More
<div class="row">
    <div class="col-12">
        <div class="card border-light text-left p-1 p-md-4 mb-4">
            <div class="card-body">
                <div class="d-flex px-1 px-md-3">
                    <div>
                        <div class="icon icon-primary"><span class="far fa-grin-stars"></span></div>
                    </div>
                    <div class="pl-2 pl-md-3">
                        <h5>100% Satisfaction</h5>
                        <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">Read More</a>
                    </div>
                </div>
            </div>
            </div>
    </div>
    <div class="col-12">
        <div class="card border-light text-right p-1 p-md-4 mb-4 mb-lg-0">
            <div class="card-body">
                <div class="d-flex px-1 px-md-3">
                    <div class="pr-2 pr-md-4">
                        <h5>100% Satisfaction</h5>
                        <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">Read More</a>
                    </div>
                    <div>
                    <div class="icon icon-primary"><span class="far fa-grin-stars"></span></div>
                    </div>
                </div>
            </div>
            </div>
    </div>
</div>

Steps

Use these components to indicate a numerotated feature list:

1

Goal identification

Where I work with the client to determine what goals the site needs.

2

Content creation

Now that we have a bigger picture of the site in mind, we can start.

3

Testing

We've got all your pages and defined how they display to the site visitor.

<div class="row">
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light rounded-circle mb-4">
                <span class="step-number text-primary rounded-circle border-white">1</span>
                <span class="step-icon icon-primary"><span class="fas fa-bullseye"></span></span>
            </div>
            <h2 class="h5 step-title">Goal identification</h2>
            <p>Where I work with the client to determine what goals the site needs.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light rounded-circle mb-4">
                <span class="step-number text-primary rounded-circle border-white">2</span>
                <span class="step-icon icon-primary"><span class="fas fa-code-branch"></span></span>
            </div>
            <h2 class="h5 step-title">Content creation</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light rounded-circle mb-4">
                <span class="step-number text-primary rounded-circle border-white">3</span>
                <span class="step-icon icon-primary"><span class="fas fa-award"></span></span>
            </div>
            <h2 class="h5 step-title">Testing</h2>
            <p>We've got all your pages and defined how they display to the site visitor.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>

Organic shape

1
Goal identification

Where I work with the client to determine what goals the site needs.

2
Content creation

Now that we have a bigger picture of the site in mind, we can start.

3
Testing

We've got all your pages and defined how they display to the site visitor.

<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light organic-radius mb-4">
                <span class="step-number text-primary border-white">1</span>
                <span class="icon-primary"><span class="fas fa-bullseye"></span></span>
            </div>
            <h5 class="step-title">Goal identification</h5>
            <p>Where I work with the client to determine what goals the site needs.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light organic-radius mb-4">
                <span class="step-number text-primary border-white">2</span>
                <span class="icon-primary"><span class="fas fa-code-branch"></span></span>
            </div>
            <h5 class="step-title">Content creation</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light organic-radius mb-4">
                <span class="step-number border-white">3</span>
                <span class="icon-primary"><span class="fas fa-award"></span></span>
            </div>
            <h5 class="step-title">Testing</h5>
            <p>We've got all your pages and defined how they display to the site visitor.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>

Square shape

1

Goal identification

Where I work with the client to determine what goals the site needs.

2

Content creation

Now that we have a bigger picture of the site in mind, we can start.

3

Testing

We've got all your pages and defined how they display to the site visitor.

<div class="row">
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light rounded text-primary mb-4">
                <span class="step-number border-white">1</span>
                <span class="step-icon icon-primary"><span class="fas fa-bullseye"></span></span>
            </div>
            <h2 class="h5 step-title">Goal identification</h2>
            <p>Where I work with the client to determine what goals the site needs.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light rounded text-primary mb-4">
                <span class="step-number border-white">2</span>
                <span class="step-icon icon-primary"><span class="fas fa-code-branch"></span></span>
            </div>
            <h2 class="h5 step-title">Content creation</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light rounded text-primary mb-4">
                <span class="step-number border-white">3</span>
                <span class="step-icon icon-primary"><span class="fas fa-award"></span></span>
            </div>
            <h2 class="h5 step-title">Testing</h2>
            <p>We've got all your pages and defined how they display to the site visitor.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>

Colors

1

Primary color

Now that we have a bigger picture of the site in mind, we can start.

2

Secondary color

Now that we have a bigger picture of the site in mind, we can start.

3

Tertiary color

Now that we have a bigger picture of the site in mind, we can start.

4

Info color

Now that we have a bigger picture of the site in mind, we can start.

5

Success color

Now that we have a bigger picture of the site in mind, we can start.

6

Danger color

Now that we have a bigger picture of the site in mind, we can start.

8

Dark color

Now that we have a bigger picture of the site in mind, we can start.

9

Gray color

Now that we have a bigger picture of the site in mind, we can start.

<div class="row">
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-primary rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">1</span>
                <span class="step-icon icon-white"><span class="fas fa-assistive-listening-systems"></span></span>
            </div>
            <h2 class="h5 step-title">Primary color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-secondary rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">2</span>
                <span class="step-icon icon-white"><span class="fas fa-highlighter"></span></span>
            </div>
            <h2 class="h5 step-title">Secondary color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-tertiary rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">3</span>
                <span class="step-icon icon-white"><span class="fas fa-fire"></span></span>
            </div>
            <h2 class="h5 step-title">Tertiary color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-info rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">4</span>
                <span class="step-icon icon-white"><span class="fas fa-assistive-listening-systems"></span></span>
            </div>
            <h2 class="h5 step-title">Info color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-success rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">5</span>
                <span class="step-icon icon-white"><span class="fas fa-highlighter"></span></span>
            </div>
            <h2 class="h5 step-title">Success color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-danger rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">6</span>
                <span class="step-icon icon-white"><span class="fas fa-fire"></span></span>
            </div>
            <h2 class="h5 step-title">Danger color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-dark rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">8</span>
                <span class="step-icon icon-white"><span class="fas fa-highlighter"></span></span>
            </div>
            <h2 class="h5 step-title">Dark color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-gray rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">9</span>
                <span class="step-icon icon-white"><span class="fas fa-fire"></span></span>
            </div>
            <h2 class="h5 step-title">Gray color</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>

Bordered

1

Discussion

Where I work with the client to determine what goals the site needs.

3

Production

Now that we have a bigger picture of the site in mind, we can start.

2

Prototyping

We've got all your pages and defined how they display to the site visitor.

<div class="row">
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape bordered border-primary rounded-circle mb-4">
                <span class="step-number rounded-circle text-primary border-primary">1</span>
                <span class="step-icon icon-primary"><span class="fas fa-assistive-listening-systems"></span></span>
            </div>
            <h2 class="h5 step-title">Discussion</h2>
            <p>Where I work with the client to determine what goals the site needs.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape bordered border-tertiary organic-radius mb-4">
                <span class="step-number text-tertiary border-tertiary">3</span>
                <span class="step-icon icon-tertiary"><span class="fas fa-fire"></span></span>
            </div>
            <h2 class="h5 step-title">Production</h2>
            <p>Now that we have a bigger picture of the site in mind, we can start.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape bordered border-secondary rounded mb-4">
                <span class="step-number text-secondary border-secondary">2</span>
                <span class="step-icon icon-secondary"><span class="fas fa-highlighter"></span></span>
            </div>
            <h2 class="h5 step-title">Prototyping</h2>
            <p>We've got all your pages and defined how they display to the site visitor.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>