What it does
Rivet Icons is Indiana University’s 16 px icon library, with a custom element, individual icon modules and a registration API for matching artwork.
A favorite button is a useful starting example. Import the heart and solid-heart modules, then let the button’s pressed state select the appropriate icon through the CSS --name variable. The same state must be communicated with aria-pressed; Rivet hides decorative icons from assistive technology by default.
For a production interface, the documentation recommends a module containing only the icons you need. The all-icons bundle is convenient for prototypes. If a required symbol is missing, registerIcon() accepts custom SVG following the 16 px grid, expanded 2 px outlines and currentColor fill. Remember that a CSS --name declaration takes precedence over the element’s name attribute when diagnosing an unexpected glyph.
Install the public rivet-icons npm package without a Rivet account. The library is free under the BSD 3-Clause licence, which requires retained notices and does not grant permission to imply university endorsement.
Strengths
- Individual modules support a deliberately limited production set.
- The documented state example connects visual changes with accessible button state.
- Custom icons can use the same registration mechanism.
Watch out for
- The compact 16 px drawing specification constrains how matching custom artwork should be prepared.
Best for
- Rivet sites
- Compact university navigation and action controls
Sources
- Rivet Icons README (Oct 27, 2026)
- Rivet Icons BSD 3-Clause License (Oct 27, 2026)