Browse icons

a 2-minute guide

How to add icons to an HTML website

Short answer

Paste the icon’s SVG code into your HTML, or add one stylesheet and write <i class="with with-home"></i>.

Time
2 min
Download
SVG
Size
any size
Cost
Free

Which file should I download?

SVG

Inline SVG is the sharpest, smallest and easiest to colour: it follows your CSS text colour. Icon classes do the same with one line of HTML per icon.

Step by step

  1. Copy the SVG

    Open the library, click an icon and press Copy SVG.

  2. Paste it into your HTML

    Paste the code where you want the icon. It’s plain HTML: no files to upload, nothing to install.

  3. Or use icon classes

    Add the stylesheet once in your <head>, then write one tag per icon. No JavaScript needed.

  4. Colour it with CSS

    Icons use currentColor, so they take the text colour: color: #FF5A36. Hover colours work too.

  5. Size it with CSS

    Icon classes are 1em square, so font-size: 32px makes a 32 px icon. For inline SVG, change width and height.

How to change the colour

Set color on the icon or any parent: .nav a { color: #2F5BFF }. Duo icons also read --with-duo for their soft fill.

How to resize it

Inline SVG: change width and height. Icon classes: change font-size, or add with-2x … with-5x.

Something not working?

The icon is black and won’t change colour.

You used an <img> tag. Images can’t inherit CSS colour; paste the SVG inline or use icon classes.

Icon classes show nothing.

Check the stylesheet link is in your <head> and the class names are right: with with-home.

Screen readers read nothing.

Decorative icons should stay silent. If the icon is the only content of a button, add aria-label to the button.

Related guides

WordPressWebflowFramer All guides

a shortcut

Stuck? Let your AI help in Plain HTML website

Click Claude, ChatGPT, Gemini, Perplexity or Grok. We copy a ready brief (“help me add an icon to my Plain HTML website project”) that points it to our skill file and this guide, and open it for you. Tell it what the icon is for: it finds the right one, then walks you through adding, recolouring and sizing it.

Ready? Find your icon.

500 icons, twenty styles, all free.

Browse icons