How to add icons to a website
Adding icons to a site takes four small decisions: which icon, how to embed it, how to colour it, and how to keep it accessible. Here's the whole flow for beginners.
1. Find the icon
Search an open-source library and grab the SVG. On IconStash you can search 311,000+ icons, recolor, and copy the SVG or an <img> embed.
2. Put it on the page
For a quick decorative icon, use an image tag. For an icon you'll recolor or animate, paste the SVG inline. To avoid choosing sets up front, use the Iconify web component:
<!-- image -->
<img src="star.svg" alt="" width="24" height="24">
<!-- web component (loads any icon by name) -->
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="mdi:star"></iconify-icon>3. Color and size it
Author icons with fill="currentColor" so they match text colour, then size with CSS (width/height or font-size for the web component).
4. Make it accessible
Decorative icon? aria-hidden="true" (or empty alt). Meaningful icon-only button? Add aria-label.
Get your first icon
Search, recolor and copy an icon or its embed code in seconds — free.
Browse icons →Frequently asked questions
What's the easiest way to add an icon?
Copy an SVG from an icon library and paste it inline, or use the Iconify web component to load any icon by name.
How do I make website icons match my colors?
Use currentColor in the SVG and set the text color, or recolor the icon before downloading.