Icons

Simple graphical cues used to quickly communicate an action, idea, or message

Overview #

Icons are simple graphical cues used to quickly communicate an action, idea, or message to users. Icons are commonly used in components like buttons and subnavs to help highlight important actions.

Developers can copy or download all available icons through the Rivet icon library. Designers can use icons in their design mockups with the Rivet UI kit (Figma design library).

Explore the Rivet icon library

Request Rivet UI kit access

Rivet icon element #

The rvt-icon custom element is the preferred way to use icons in a Rivet project.

To use this custom element, you’ll need to import the Rivet icons CSS and JavaScript via CDN or install the rivet-icons package using npm.

Hosted assets #

The quickest way to get started with the rvt-icon element is to use the CDN-hosted versions of the CSS and JavaScript files. Copy and paste the markup below into the head of your document, after the main Rivet stylesheet.

<link rel="stylesheet" href="https://unpkg.com/rivet-icons@3.0.0/dist/rivet-icon-element.css">
<script type="module" src="https://unpkg.com/rivet-icons@3.0.0/dist/rivet-icons.js"></script>

Install using npm #

If you are using npm to manage your project’s dependencies, you can install the rivet-icons package:

npm i --save rivet-icons@3.0.0

Using the custom element #

Use the rvt-icon custom element wherever you would use an SVG. Use the name attribute to specify the name of the icon you’d like to display.

<rvt-icon name="heart"></rvt-icon>

A complete list of icons and their names can be found on the icon library page. You can also copy the rvt-icon element markup for each icon from the library page.

Complete documentation #

The Rivet icons repo on GitHub features complete documentation for advanced users on how to use, adjust, and extend icons.