Icons

Icons create a visual language for navigation and user interaction.

Other sets

Flags | v1 | Legacy
 

usage

Style Guide uses SVG sprites along with a microservice method to render icons into img tag. To import the img tag to your project, user the following code to display an icon

<img src='/icons/v1/close' alt='chevron icon' />

Result should be:

chevron icon

Color and size

<img src='/icons/v1/close/ff0033' alt='chevron icon crimson' width='20' />

The icon should render with the new color and size like this:

chevron icon

example hover

<button class='hover-example ngp_btn ngp_btn--secondary'>
 <span class="icon"></span>
 <span class="text">Button Hover</span>
</button>
.hover-example .icon {
 background-image: url("./icons/v2/heart-filled/red"), url("./icons/v2/heart-filled/blue");
 transition: background-image 300ms ease;
}
.hover-example:hover .icon {
 background-image: url("./icons/v2/heart-filled/blue");
}