diff --git a/src/breadcrumb.scss b/src/breadcrumb.scss
index 5e09941979..7117dbbfea 100644
--- a/src/breadcrumb.scss
+++ b/src/breadcrumb.scss
@@ -57,10 +57,9 @@ $fd-breadcrumb-border-top-radius: 0.125rem !default;
   }
 
   &__dropdown-icon {
-    @include fd-reset();
-    @include fd-icon('slim-arrow-down');
-
-    text-decoration: inherit;
-    color: var(--sapLinkColor);
+    @include fd-icon-element-base() {
+      text-decoration: inherit;
+      color: var(--sapLinkColor);
+    }
   }
 }
diff --git a/stories/breadcrumb/breadcrumb.stories.js b/stories/breadcrumb/breadcrumb.stories.js
index f0fc8d3515..8a6cce7d0b 100644
--- a/stories/breadcrumb/breadcrumb.stories.js
+++ b/stories/breadcrumb/breadcrumb.stories.js
@@ -23,7 +23,7 @@ The breadcrumb component is a type of navigation that indicates the position of
 - Independent object pages, such as fact sheets
 `,
         tags: ['f3', 'a11y', 'theme'],
-        components: ['popover', 'list', 'breadcrumb']
+        components: ['popover', 'list', 'breadcrumb', 'icon']
     }
 };
 
@@ -57,7 +57,7 @@ export const overflow = () => `
                     aria-haspopup="true"
                     >
                 ...
-                    <span class="fd-breadcrumb__dropdown-icon"></span>
+                    <i aria-label="Show collapsed breadcrumbs" class="fd-breadcrumb__dropdown-icon sap-icon sap-icon--slim-arrow-down"></i>
                 </div>
             </div>
             <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="breadcrumb1">