Adding custom icons to the menu with CSS

Top Menu introduced in Platform 6 removed icons in the menu. Left-oriented main navigation menu which allows icons should be discussed with your Customer Success Manager if you have any questions.

Our Navigation Menu allows for custom links and pages to be added. You may have a preferred icon to use for your menu items; in this case, use CSS to add custom icons to your menu.

Upload regular state icons in Assets.
Upload hover/active state icons in Assets.
Go to Stylesheet in Design.

Overwrite the default icons with the icons uploaded in Assets.

     .navigation-container .main-navigation svg {
    background-position: center center;
    background-size: contain;
    fill: transparent !important;
    height: 36px;
    margin-right: 16px;
    width: 36px;
}

.navigation-container .main-nav-home svg {
    background-image: url(https://cmnty/uploads/custom_style/menu_startseite.svg);
 } 

.navigation-container .main-nav-home.active svg, .navigation-container .main-nav-home:hover svg {
    background-image: url(https://cmnty/uploads/custom_style/menu_startseite_active.svg); 
}

Be sure to use the accurate URL to your assets.
Review the icon changes in effect.
Repeat process for all menu items for which you would like a custom icon.

Add Custom Icons to Navigation Menu