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).
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.