Icon
Looking for the icons?
Head over to our Foundations: Iconography page to explore the full collection.
Looking for the icons?
Head over to our Foundations: Iconography page to explore the full collection.
Icon
Edit element properties
import "@rhds/elements/rh-icon/rh-icon.js";<rh-icon icon="hat"></rh-icon>Accessibility
Edit element properties
import "@rhds/elements/rh-icon/rh-icon.js";<rh-icon set="ui" icon="arrow-down" accessible-label="Page down"></rh-icon>
<rh-icon icon="info" aria-labelledby="info" role="img"></rh-icon>
<span id="info">Information</span>Gradient Fill
Edit element properties
import "@rhds/elements/rh-icon/rh-icon.js";.custom-gradient {
/* Color 1 */
--rh-icon-gradient-color-stop-1: var(--rh-color-blue-40, #4394e5);
/* Color 2 */
--rh-icon-gradient-color-stop-2: var(--rh-color-green-40, #87bb62);
}
:root {
/* For demo purposes only */
--rh-icon-size: var(--rh-size-icon-06);
}<rh-icon icon="new-fill" set="ui" gradient-fill=""></rh-icon>
<rh-icon class="custom-gradient" icon="check-circle-fill" set="ui" gradient-fill=""></rh-icon>Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
