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. We offer menu icons for these items are available in Menu Configuration. You may have a preferred icon to use for your menu items; in this case, use CSS to add custom icons to your menu.

Add Custom Icons to Navigation Menu

  1. Upload regular state icons in Assets.
  2. Upload hover/active state icons in Assets.
  3. Go to Stylesheet in Design.
  4. 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 svg, .navigation-container .main-nav-home:hover svg {
        background-image: url(https://cmnty/uploads/custom_style/menu_startseite_active.svg); 
  5. Be sure to use the accurate URL to your assets.
  6. Review the icon changes in effect.
  7. Repeat process for all menu items for which you would like a custom icon.

Related Articles