Icons and illustrations

Icons are essential elements in Nova’s design language. They support clarity, recognition, and visual hierarchy across products — from compact interface controls to expressive, branded experiences.

Using Bootstrap Grid with Icons

To arrange icons using the Bootstrap grid, wrap your icon HTML in Bootstrap's grid classes. For example:

Here’s an example displaying 12 Bootstrap 5 icons with a light grey background and rounded corners:

Alarm

Battery

Bell

Calendar

Camera

Chat

Check

Cloud

Envelope

Gear

Heart

Star

Note: Make sure to include Bootstrap Icons and Bootstrap CSS in your project for this to render correctly.

<div class="container">
    <div class="row">
        <div class="col-4 text-center">
            <img src="icon1.svg" alt="Icon 1" />
            <p>Icon 1</p>
        </div>
        <div class="col-4 text-center">
            <img src="icon2.svg" alt="Icon 2" />
            <p>Icon 2</p>
        </div>
        <div class="col-4 text-center">
            <img src="icon3.svg" alt="Icon 3" />
            <p>Icon 3</p>
        </div>
    </div>
</div>

• Use .container for layout.
• .row creates a horizontal group.
• .col-* sets column width.
• Place your icon HTML inside each column.

Refer to Bootstrap Grid documentation for more options.