Icons

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 and designers can copy and/or download all available icons through the Rivet icon library and use them in their design mockups with the Rivet UI kit (Figma design library).

Copying icon SVGs #

The quickest way to use Rivet icons in your project is to copy an icon’s SVG code from the icon library page and paste it into your HTML document.

<!-- Example button element with a Rivet icon -->
<button type="button" class="rvt-button">
  
  <!-- Rivet icon SVG copied and pasted from the icon library page -->
  <svg viewBox="0 0 16 16" id="rvt-icon-copy">
    <g fill="currentColor">
      <path d="M4 10.23H1.92V2H8v1h2V2a2 2 0 0 0-2-2H1.92a2 2 0 0 0-2 2v8.23a2 2 0 0 0 2 2H4Z"></path>
      <path d="M14 16H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2ZM8 7v7h6V7Z"></path>
    </g>
  </svg>

  <!-- Button text -->
  <span>Copy</span>

</button>

This approach works well if you only intend to use a few icons on your site. However, if your layouts make use of several icons, you might consider using the rvt-icon custom element, described below.

Rivet icon element #

The rvt-icon custom element is intended to provide a more succinct method for using Rivet icons.

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@2.0.0/dist/rivet-icons.css">
<script defer src="https://unpkg.com/rivet-icons@2.0.0/dist/rivet-icons.js"></script>
<script type="module" src="https://unpkg.com/rivet-icons@2.0.0/dist/rivet-icon-element.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@2.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 from each icon’s action menu, shown by clicking the ellipsis (…).

Complete documentation #

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