Aura Design System


The icons you use identify you, and the icons identify our common ways of identifying items and actions.


Inside your Next.js project directory, add the Aura icons image to the public/ with the name sprite_glyphs.png

Icons are sprites

Whole icons are just an image that shows a specific 24px * 24px of the image.

To be more clear, let's take a look inside the icon class:

.icon {
    background-image: var(--aura-sprite); //url of the image sprite
    background-size: 265px 96px; //image sprite dimensions with and height in half to support retinas screens 
    background-repeat: no-repeat;
    height: 24px;
    width: 24px;
    display: inline-block;
    vertical-align: middle;
} {
    background-position -144px 0

In this sense, there is only a single icon size, a single type, and a single shape. They are these icons and us more.

Do not you agree with using sprites?

Every time you can use any else icons library

And if you are looking for this icons in white mode, you just use a filter class for that.

.dark.icon  {
    filter: invert(1);

A use case example:

const singleIcon = () =>  (
       <i className="icon bag" />
const singleIconWhite = () =>  (
       <i className="icon bag dark" />
const multipleIconWhite = () =>  (
  <div className="dark">
       <i className="icon bag" />
       <i className="icon heart" />
       <i className="icon search" />

if you do not like the aura icons but fell in love with the sprite, every time you can download the aura icons and create your own keep it's spacing.