SVG Icons

Lesson 6 of 15 1 min read
  • JNext lesson
  • KPrevious lesson
  • FSearch lessons
  • EscClear search

WordPress blocks SVG uploads by default, and for good reason: an SVG is an XML document that can carry scripts, event handlers, and external references. The SVG Icons module makes WordPress SVG icons safe to use, sanitizing every upload and letting you insert icons inline in the block editor where they scale with the surrounding text.

I use it for the small inline icons across my own site: arrows in buttons, checkmarks in feature lists, logos in comparison tables. No icon font, no extra HTTP request, no JavaScript library.

SVG Icons module for safe SVG upload and inline insertion in the WordPress block editor

How Sanitization Works

Every uploaded SVG passes through an allowlist sanitizer before it touches your media library. Structural and shape elements survive; anything executable dies:

  • Allowed: svg, g, path, circle, ellipse, rect, line, polyline, polygon, defs, clipPath, mask, use, symbol, title, desc, gradients and stops
  • Stripped: script tags, event handlers like onclick and onload, javascript: URLs, data: URLs, and PHP tags

The sanitizer is filterable through functionalities_svg_icons_sanitize if you need to extend the allowlist for a specific workflow.

Two Ways to Insert Icons

Inline insertion is the everyday path: a button in the RichText toolbar drops an icon directly into a paragraph, heading, list item, or button, and the icon renders at 1em × 1em so it scales with the text around it. Bump the font size and the icon follows.

The dedicated SVG Icon block is the layout path: a standalone block with its own size and color controls, for icons that act as visual elements rather than inline glyphs.

Zero Frontend Bloat

No CSS or JavaScript loads on the front end unless a page actually contains icons. The module also ships full block editor iframe compatibility, so icons render correctly inside the iframed editor canvas that WordPress has used since 6.3.

Why Not an Icon Font or a Plugin?

Icon fonts load every glyph to show three, and generic “enable SVG” plugins skip sanitization entirely, which reopens the exact XSS vector WordPress blocked uploads to prevent. Inline sanitized SVG is lighter than the first and safer than the second. For the upload-security side of this topic, my roundup of WordPress security plugins covers what a dedicated scanner adds.

That wraps the core features. The next group starts with Login Security, then the two monitoring modules that watch your site for silent breakage.