Bootstrap Icons

Home / Guides / How to Use SVG Icons in HTML

How to Use SVG Icons in HTML

SVG is markup, so a browser can draw it directly in your page without any extra download. Learn three reliable ways to place SVG icons in an HTML page and when to pick each.

Inline SVG

Paste the svg element where the icon belongs. This gives CSS full control over color and size and costs no network request.

<button>
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none"
       stroke="currentColor" stroke-width="1.75" aria-hidden="true">
    <path d="M4 12h16M14 6l6 6-6 6"/>
  </svg>
  Next
</button>

The img tag

Use img when the icon never needs recoloring. It caches well but ignores page CSS inside the file.

<img src="assets/icons/arrows/arrow-right.svg" width="24" height="24" alt="">

CSS backgrounds

A background-image keeps markup clean for purely decorative marks, though it cannot inherit currentColor.

Choosing between the methods

Use inline SVG when you need to recolor, animate or label an icon. Use the img tag when the same icon repeats across many pages and browser caching matters. Use a CSS background only for purely decorative marks such as list bullets. Mixing methods inside one project is normal as long as the team agrees on when each one applies.

Setting size and alignment

Always give an SVG a width and height, or a CSS size, otherwise it can stretch to fill its container. When an icon sits beside text, align it with flexbox (display:inline-flex; align-items:center; gap:.5em) so it stays level with the baseline across fonts.

Reusing the same icon many times

If one icon appears dozens of times on a page, define it once inside an svg symbol and reference it with the use element. This keeps the HTML short and makes later changes a one-line edit.

Quick checklist

  • The svg has a viewBox of 0 0 24 24
  • Width and height are set explicitly
  • Decorative icons use aria-hidden="true"
  • Color comes from currentColor, not hard-coded values
  • The icon was checked at 16px and at 32px

Common mistakes to avoid

Forgetting the viewBox so the icon crops or stretches, leaving out width and height so the icon fills its whole container, and hard-coding a color that stops the icon following your theme. Also avoid pasting the same large SVG dozens of times when a symbol would do.

Conclusion

SVG gives you three practical ways into a page: inline markup for full control, the img tag for cached decorative files, and CSS backgrounds for simple marks. Start with inline SVG and currentColor, set a clear size, and decide early which method your project uses for each job.

Frequently asked questions

Next steps

Try these ideas with real icons in the icon browser, or review the categories. See the license page for usage terms.

Related guides