Icon
On this page
On this page
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>Test Remove Icon Dynamic
Edit element properties
import "@rhds/elements/rh-icon/rh-icon.js";
import "@rhds/elements/rh-button/rh-button.js";
const icon = document.querySelector('rh-icon');
const btn = document.getElementById('remove');
btn.addEventListener('click', () => {
icon.removeAttribute('icon');
});<rh-icon icon="hat"></rh-icon>
<rh-button id="remove">Remove Icon</rh-button>
<rh-icon icon="">test</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.
