Browse icons

a 3-minute guide

How to add icons to WordPress

Short answer

Easiest: add an Image block and upload a PNG. Sharpest: add a Custom HTML block and paste the SVG code.

Time
3 min
Download
PNG or SVG code
Size
128 px PNG
Cost
Free

Which file should I download?

PNG or SVG code · 128 px PNG

WordPress blocks SVG file uploads by default for safety, so upload a PNG, or paste the SVG as code in a Custom HTML block. Pasted SVG stays sharp and takes any colour.

Step by step

  1. Pick your icon and download it

    Open the icon library and search for what you need, for example “shield check”. Click the icon, choose a colour, then click Download PNG and pick 128 px. Want it razor sharp? Click Copy SVG instead and use step 4.

  2. Add an Image block

    In the block editor, click the + (Block Inserter), choose Image, then Upload and pick the PNG.

  3. Set its size

    In the block settings on the right, set the width (for example 64 px). Use the alignment buttons to centre it.

  4. Sharper option: paste SVG code

    Add a Custom HTML block and paste the SVG you copied. Change width and height in the code to resize it, and add style="color:#2F5BFF" to colour it.

  5. Preview and publish

    Click Preview to check it, then Update or Publish.

How to change the colour

PNG: download it again in the colour you want. SVG code: add style="color:#yourcolour" to the <svg> tag. The icon follows that colour because it uses “currentColor”.

How to resize it

Image block: set the width in the block settings. SVG code: change the width and height numbers (keep them the same).

Something not working?

“Sorry, you are not allowed to upload this file type.”

That’s WordPress blocking SVG uploads. Upload the PNG, or paste the SVG into a Custom HTML block.

I don’t see the Custom HTML block.

Your user role may not allow it. Ask the site admin, or use the PNG option.

The pasted icon is huge.

Set width="32" height="32" (or any size) on the svg tag.

Related guides

Plain HTML websiteWebflowWix & Squarespace All guides

a shortcut

Stuck? Let your AI help in WordPress

Click Claude, ChatGPT, Gemini, Perplexity or Grok. We copy a ready brief (“help me add an icon to my WordPress 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