Docs
← Back to site

Choosing Menu Icons

3 min readUpdated October 31, 2026

Every menu item has an icon, and you can pick it from about 380 built-in Material Symbols (rounded style). The icons are drawn as inline SVG, so they always show: no icon font or Font Awesome file is loaded, nothing can be blocked or slow, and a theme’s icon CSS cannot change them.

Pick an icon#

  1. Go to WooCommerce > Account Portal > Menu Items.
  2. Click the icon in the item’s Icon (Material Symbol) column. The Choose Icon window opens.
  3. Browse a category, or type in Search icons….
  4. Click an icon. The window closes and the row shows the new icon and its name.
  5. Click Save Settings.

Press Escape, click ✕ or click outside the window to close it without changing anything.

Choose Icon window on the Shopping category with search, icon count, Upload SVG and the current icon highlighted

Find the right icon#

The category tabs are: All, Your icons, Account & security, Shopping, Orders & shipping, Payments & offers, Messages & support, Content & downloads, Bookings & travel, Food & drink, Fashion & beauty, Home & garden, Tech & media, Auto & trades, Health & wellness, Sport & fitness, Learning and General. An icon can be in more than one category.

Search matches:

  • the icon name, for example cart finds shopping_cart and add_shopping_cart,
  • the category name, for example food or shipping lists the icons in that category,
  • the name of your own uploaded icons.

Searching always looks in every category. Icons whose name matches come first. The count next to the search field shows how many icons match.

Icon names are Material Symbols names with underscores, as on Material Symbols. Only the icons in the plugin’s set can be picked; the picker shows them all.

Where the icon is used#

The icon you pick appears everywhere the item does:

  • the account menu in every menu style (sidebar, top tabs, icon rail, dock, phone drawer and bottom tab bar),
  • the Shortcuts Dashboard widget,
  • the drawer of the Account Nav Widget.

Icons take the colour of the text around them, so they follow light and dark mode, the active menu item and your brand colours without extra settings.

The icon picker also opens from a page card’s icon on the Pages tab. When you save the page, that icon is used for the page’s menu row too, unless the row already has another icon of its own (one you picked on the Menu Items tab).

Your own icons#

Can’t find the right one? Click Upload SVG in the picker to add your own icons from the media library. See Uploading Your Own SVG Icons.

Icons saved by older versions#

Menus saved with an older version may hold a Material Symbols name that is not in the set, or a Font Awesome class such as fa-solid fa-house. These are mapped to the closest icon automatically (fa-house becomes home, fa-truck becomes local_shipping, and so on) and saved that way the next time you save the Menu Items tab. A value that cannot be matched shows the link icon.

For developers#

Icons from the set can be used in your own code with the same names:

// Inline SVG; sized with the --wap-ic CSS custom property (default 20px).
echo WAP_Icons::render( 'local_shipping' );

WAP_Icons::render() maps old names and never returns an empty string. The icons are 960 x 960 SVG paths filled with currentColor, and carry the class wap-svg-icon.

Share:

Was this helpful?