How to Optimise SVG Icons for Elementor

SVG icons stay sharp at any size and weigh very little, which makes them ideal for Elementor’s Icon, Icon Box and Icon List widgets. Exported files often carry editor metadata, fixed dimensions and hard-coded colours, though, and those cause icons that won’t resize, won’t recolour or look slightly off. This guide shows how to optimise SVG icons for Elementor, what each change does, and how to keep SVG uploads reasonably safe.

The three attributes that matter

viewBox: keep it

viewBox="0 0 24 24" tells the browser the icon was drawn on a 24 × 24 grid. With it, the browser can scale the drawing to any box. Without it, the icon may be clipped or refuse to scale. Never remove viewBox from an icon; current SVGO versions keep it by default (removeViewBox isn’t part of SVGO’s preset-default).

width and height: usually remove

Fixed width="24" height="24" attributes set a default display size. Elementor applies its own size through CSS, which normally wins, but fixed dimensions can still cause awkward sizing in other contexts, such as when the same file is used in an Image widget or outside Elementor. Removing them lets the icon fill whatever size its container gives it. Keep them if the file is also used somewhere that needs an intrinsic size.

currentColor: make icons recolourable

A path with fill="#1d4ed8" is always blue. Change it to fill="currentColor" (or stroke="currentColor" for outline icons) and the icon inherits the CSS text colour, so Elementor’s colour and hover-colour controls can change it. Only do this for single-colour icons; a multi-colour logo should keep its colours.

How to optimise an SVG icon for Elementor

1. Export a clean file. In your design app, outline strokes only if you need a filled icon, flatten unnecessary groups, and export as SVG rather than “SVG with editing capabilities”.
2. Open it in a text editor and check for viewBox. If it’s missing and the file has width and height, add viewBox="0 0 W H" using those numbers.
3. Replace the colour on single-colour icons with currentColor.
4. Run SVGO. With Node.js installed: npx svgo icon.svg -o icon.min.svg. To also drop fixed dimensions, use a config file that adds the removeDimensions plugin (example below).
5. Compare before and after by opening both files in a browser side by side. If anything shifted, use the default preset only.
6. Upload and test in an Elementor Icon widget: change the size and colour controls and check the hover state.

// svgo.config.mjs
export default {
  plugins: ['preset-default', 'removeDimensions'],
};

// run it on a folder
npx svgo --config svgo.config.mjs -f icons -o icons-optimised

What optimisation actually saves: a small test

We ran SVGO 4.1.0 on five icons from the open-source Lucide set (version 1.64.0, ISC licence): house, mail, phone, shopping cart and star. Lucide icons are already tidy, so this shows a realistic floor, not a dramatic best case.

Icon	Original (bytes)	preset-default	+ removeDimensions
house	459	382	359
mail	391	314	291
phone	513	440	417
shopping-cart	541	456	433
star	663	580	557
Total	2,567	2,172 (−15%)	2,057 (−20%)

Two findings matter more than the byte counts. First, files exported from design apps typically contain far more metadata than these, so your savings will usually be larger; measure your own. Second, SVGO’s defaults removed Lucide’s licence comment. If an icon’s licence requires attribution, keep that notice elsewhere, such as in your theme credits, or configure SVGO to preserve it.

Optimising is not sanitising

An SVG is code. A malicious file can contain scripts or event handlers that run when the file is opened directly in a browser. An optimiser is built to shrink files, not to find attacks, so an optimised SVG isn’t necessarily a safe one. WordPress blocks SVG uploads by default for this reason.

Elementor can allow SVG uploads: in Elementor → Editor → Settings → Advanced, set Enable Unfiltered File Uploads to Enable and save. Elementor’s help article (updated October 2026) says it tries to strip malicious code from uploaded SVGs but still recommends uploading only from trusted sources. Practical rules:

• Use icons you drew or from reputable, licensed icon sets.
• Restrict upload rights to administrators you trust.
• Open unfamiliar SVGs in a text editor and look for <script>, on…= attributes, or links to external files before uploading.
• Use a dedicated SVG sanitising plugin if editors or clients upload files.

Troubleshooting

• The colour control does nothing: the file still has hard-coded fill or stroke values, or an inline style attribute. Replace them with currentColor.
• The icon is clipped: the viewBox is missing or wrong. Restore it from the original export.
• Outline icons look too thick or thin: stroke width scales with the icon. Pick a stroke weight that suits your typical display size.
• “Sorry, you are not allowed to upload this file type”: SVG uploads aren’t enabled. See the safety section above.

FAQs

Should I remove the viewBox to save bytes?

No. It’s a few bytes and it’s what makes the icon scale correctly.

Is an SVG icon better than an icon font in Elementor?

For a handful of custom icons, yes: you load only the icons you use. Icon fonts load a whole set at once.

Can I convert an SVG to PNG for places that don’t accept SVG?

Yes. Our SVG to PNG converter exports a raster copy at the size you need.

Does optimising an SVG change how it looks?

Default settings rarely change appearance, but path simplification can shift detailed artwork slightly. Always compare before and after.