Add an icon to a menu item

How-to guide All plans 2 min read

Icons help shoppers scan the menu faster — a flame next to Sale, or a small logo next to a brand.

Add an icon

1. Open the item

   Hover over the item in the preview and click Edit Item (1). The item settings open on the left (2), with Icon at the top.

   

   (1) Click Edit Item, (2) the item settings open on the left, with Icon at the top

2. Choose the icon

   Pick from the library or upload your own image.

   Select icon
   1. Click Select icon and search, for example heart or truck.
   2. Click the icon. It’s added right away and uses the item’s text color.
   Upload icon
   1. Click Upload icon. The Images panel shows images you’ve already uploaded.
   2. Drop an image into the upload area or click it to choose a file.
   3. Click the image, then click Select.

   

   Icon is at the top of the item settings: Select icon or Upload icon.

3. Set the icon width

   Uploaded images only — see Icon width.

4. Save and publish

   Click Save, then Publish.

Note

Upload a square PNG, JPG, WebP, GIF or SVG of about 60 × 60 px, 2 MB or smaller. Larger files show The image may not be greater than 2MB. Please resize and reupload.

Icon width

Auto

The image keeps its natural size.

Custom

A value plus a unit (%, px, em or rem), for example 24px.

Change or remove it

Click Change in the Icon box, then:

• Select icon — pick a different library icon.
• Upload icon — use a different image.
• Remove — remove the icon from the item.

Uploaded images stay in the Images panel for reuse. To delete one from the library, select it and click Delete.

Tips

• Use one style (outline or filled) and size for all icons in a menu.
• If an uploaded icon looks blurry, upload it at twice the display size (48 × 48 px for 24 px) and set a Custom width.
• Use a different icon per language in translate mode.

Related pages

• Edit a menu itemChange an item's title, link, icon, colors, badge, submenu and visibility, or duplicate, move and delete it.
• Add a menu itemAdd a top-level item to your menu bar and link it to a page, collection, product or URL.
• Translate a menuTranslate menu items and the built-in menu texts into every language your store sells in.

Was this helpful?

Report an issue