Uploading Your Own SVG Icons

If the built-in icons don’t match your brand, add your own SVG icons in the icon picker. They are stored with the plugin’s settings and work everywhere the built-in icons do: the account menu, Dashboard shortcuts and the header drawer.

Upload an icon#

1. Go to WooCommerce > Account Portal > Menu Items and click the icon of any menu item to open Choose Icon.
2. Decide on colours first: tick Keep the file’s colours for a multi-colour icon, or leave it unticked for a one-colour icon (see below).
3. Click Upload SVG. The WordPress media library opens (Choose SVG icons).
4. Upload one or more .svg files, or select SVG files already in the library. You can select several at once.
5. Click Use as icons. The picker switches to the Your icons tab with the new icons.
6. Click an icon to use it for the menu item, then click Save Settings.

If the media library is not available on the page, Upload SVG opens your computer’s file chooser instead and the files are added directly.

One colour or the file’s colours#

Choice	Result	Best for
Keep the file’s colours unticked (default)	Every fill, stroke and gradient colour becomes the text colour, like the built-in icons. The icon follows light and dark mode and the active menu item.	Line and solid icons, logos in one colour
Keep the file’s colours ticked	The colours in the file are kept as they are.	Multi-colour illustrations, brand marks

The choice is saved with each icon when it is added. To change it later, delete the icon and add it again with the other setting. Shapes inside a mask always keep their colours, because there white and black decide what shows.

What the cleaner keeps and removes#

An SVG file can carry scripts and links to other sites, so each file is rebuilt from an allow list before it is saved, both in the media library and as an icon.

Kept:

• Shapes and structure: path, circle, ellipse, line, polyline, polygon, rect, g, defs, symbol and use (only pointing to a shape inside the same icon).
• Gradients, clip paths and masks: linearGradient, radialGradient, stop, clipPath, mask.
• Drawing attributes such as d, points, fill, stroke, stroke-width, opacity, transform and viewBox.
• Colours and strokes from style="" attributes and from simple class rules in a <style> block (for example .st0{fill:#fff}, as Illustrator exports).

Removed:

• Scripts, event attributes (onclick and the like), javascript: and data: values.
• Links to other files or sites, including url() that is not a gradient, clip path or mask inside the icon.
• Embedded images, text, fonts and foreign content.
• Any other CSS in <style> blocks (only simple class rules are read), comments, the XML declaration and DOCTYPE.

IDs are prefixed with the icon’s own key, so two icons on the same page never share a gradient by accident. When the file has no viewBox, its width and height are used; failing that, 0 0 24 24.

Limits and error messages#

Limit	Value	Message
File size	100 KB per file	“That SVG is larger than 100 KB. Icons are usually under 10 KB: export it again without embedded images.”
Number of icons	200	“You can keep up to 200 icons. Delete some to add more.”
Usable content	At least one shape	“That file is not an SVG icon the portal can use.”
File type	.svg only	“only SVG files can be used as icons.”

Files with entity declarations (<!ENTITY) are refused. When several files are uploaded at once, the ones that work are added and the others are listed with their reason.

Delete an icon#

1. Open Choose Icon and go to Your icons.
2. Click the ✕ on the icon’s tile and confirm.

Deleting takes effect at once. Menu items that used the icon show the default link icon until you pick another. The SVG file stays in the media library; delete it there if you no longer need it.

Names, search and export#

The icon’s name is its file name (for an upload from your computer, dashes and underscores become spaces, so gift-card.svg becomes “Gift Card”; from the media library, the attachment title). You can search Your icons by that name.

Custom icons are part of the settings export on WooCommerce > Account Portal > Export / Import. Unlike the logos, they are copied to the other site: importing a file that has icons replaces that site’s uploaded icons, and each icon is cleaned again.

Related#

• Choosing Menu Icons
• Editing the Account Menu
• Dashboard Widgets and Tiles