Icon library added to Rivet documentation

On behalf of the design system team, I’m pleased to announce that we’ve added a comprehensive new icons section to the Rivet documentation.

This new section of the site features a library of over 200 icons for use with Rivet, along with guidelines for using, creating, and requesting icons.

While the Rivet icon set has been available for several years, it was challenging for many developers to work with. Documentation was limited to the rivet-icons repository on GitHub that many were unaware of, and instructions on how to use, create, or request icons was incomplete.

With the addition of this new section to the Rivet site, we hope that users of the design system will find icons easier to implement in their projects.

Redrawn icons #

The addition of icons documentation to the Rivet site comes on the heels of the 2.0.0 release of the rivet-icons package.

This update adds several new icons, redraws icons for improved clarity and consistency, and provides more options for both solid and outlined icons.

Using the rvt-icon web component #

While icon SVG code can be copied from the library and pasted into an HTML document, the new documentation highlights the rvt-icon web component as a method for adding icons to a Rivet page.

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

The rvt-icon element is intended to provide developers with a more succinct and readble way to add Rivet icons to their HTML, as raw icon SVG code can be complex and noisy.

Additionally, because the rvt-icon element handles the generation of an icon’s SVG code behind the scenes, updates can be made to the icon library without requiring manual changes on the part of the developer.

Requesting new icons #

To request a new icon to be added to the Rivet icons library, you can fill out our new support request form.

Acknowledgements #

The Rivet team would like to extend a special thanks to Chris Basham for his significant contribution to the Rivet icons library and documentation.