Skip to content

SVG Icons

This tool’s upload path is self-contained and doesn’t depend on the site-wide SVG Uploads module. That module (off by default, in the Content & design group of EMCP Tools → Modules) controls whether SVGs can be uploaded through the general Media Library uploader. This tool has its own sanitized upload path regardless of that setting.

It registers while Elementor is the builder selected on EMCP Tools → Page Builders. Its switch is in the SVG Icons section of the Elementor tab on EMCP Tools → Tools, and it is on by default.

Uploads an SVG (from a URL or raw markup) into the WordPress Media Library so it can be referenced by Elementor’s icon and icon-box widgets.

Input: one of:

  • url: external SVG URL to download
  • markup: raw SVG markup as a string

Plus:

  • title: optional, defaults to filename or "Custom SVG"

Returns: { attachment_id, url, library_id }.

The library_id is the value to pass into a widget’s icon setting:

{
"icon": {
"value": { "id": 1234, "url": "https://example.com/icon.svg" },
"library": "svg"
}
}

The icon and icon-box widgets (added with add-free-widget) accept either a Font Awesome icon or an SVG library ID in the same control; the widget figures out which.

Capability: edit_posts + ownership check on the calling user.

WordPress doesn’t allow SVG uploads through the normal Media Library by default (XSS risk via embedded <script> tags). EMCP Tools sanitizes SVG markup before saving (strips <script>, on* event attributes, and any external references) using the same allow-list approach as the WP-SVG-Sanitizer library.

If you need to upload a complex SVG that includes legitimate filter definitions or gradients, those pass through. Only execution vectors get stripped.

The fastest way to populate an Elementor icon set is to use a system like Lucide or Heroicons. They expose raw SVG markup for every icon. Ask the AI to pull a specific icon’s SVG, then call upload-svg-icon with the markup, then reference the returned ID in an icon widget.