# Main Menu Icons

The **Main Menu Icons** block is specific to the **Titles Menu** header design.\
Unlike other header types, this layout allows you to enhance the navigation visually by assigning icons or images to each main menu item.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FX5eH7dNJzhBjTp4cBWMT%2Fheader_38.jpg?alt=media&#x26;token=ad3cead3-b8a3-470e-93cf-2f9c6b5fe08c" alt=""><figcaption></figcaption></figure>

***

## **Main Menu Icons — Options Overview**

You can add up to **20 individual blocks**, each corresponding to a menu item (for example, *Home*, *Shop*, *Blog*, etc.).\
Every block has identical settings, ensuring a consistent look across the entire header.

| **Option**                    | **Values / Inputs**                                                                               | **Description**                                                                                                                                                                                                                                                                                                               |
| ----------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Menu item blocks (#1–#20)** | Up to 20 items                                                                                    | You can create up to 20 blocks, each representing one main menu link in the Titles Menu layout. Each block is managed separately, allowing full control over visuals for each item.                                                                                                                                           |
| **SVG icon**                  | Upload or paste SVG code                                                                          | Allows you to add a **vector icon** for the menu item. You can either upload an SVG file or paste the raw SVG code directly. SVG icons are resolution-independent, ensuring sharp, scalable visuals on all devices. **Tip:** Ensure that your SVG code includes proper `width` and `height` attributes for consistent sizing. |
| **Image**                     | <p>Upload image file (PNG, JPG, or WebP). </p><p>60 x 60px .png with transparency recommended</p> | Adds a **custom image** instead of an SVG icon. Use this if you prefer bitmap graphics, brand imagery, or unique icon styles. It’s recommended to use transparent PNGs for best results on colored backgrounds.                                                                                                               |
|                               |                                                                                                   |                                                                                                                                                                                                                                                                                                                               |

#### **Usage Notes**

* The **Main Menu Icons** block appears only in the **Titles Menu** header type and is not available in other header designs.
* You can freely mix SVG icons and images — for example, use SVGs for system icons (like “Search” or “Cart”) and images for promotional categories.
* Icons and images are automatically aligned with the Titles Menu’s layout and adjust based on your selected **Icons size** setting in the header options.
* To maintain consistency, use icons or images of similar proportions and visual weight across all menu items.
