diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss
index cd77aa3ad13..041a0abb567 100644
--- a/packages/core/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/core/src/components/breadcrumb/breadcrumb.scss
@@ -10,6 +10,34 @@
 @import 'mixins/hover';
 @import 'mixins/text-truncation';
 
+@mixin crumb-hover($variant) {
+  @include hover {
+    background-color: var(--theme-breadcrumb-#{$variant}--background--hover);
+
+    .crumb-text,
+    .glyph {
+      color: var(--theme-breadcrumb-#{$variant}--color--hover);
+    }
+
+    .crumb-text + .glyph-chevron-right-small {
+      color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);
+    }
+  }
+
+  @include active {
+    background-color: var(--theme-breadcrumb-#{$variant}--background--active);
+
+    .crumb-text,
+    .glyph {
+      color: var(--theme-breadcrumb-#{$variant}--color--active);
+    }
+
+    .crumb-text + .glyph-chevron-right-small {
+      color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);
+    }
+  }
+}
+
 @mixin breadcrumb($variant) {
   .crumb.#{$variant} {
     background-color: var(--theme-breadcrumb-#{$variant}--background);
@@ -86,6 +114,8 @@
     outline: none;
     cursor: pointer;
 
+    @include crumb-hover('btn');
+
     .crumb-text {
       @include ellipsis;
       display: flex;
@@ -137,11 +167,14 @@
     display: flex;
 
     .more-text-ellipsis {
-      height: $x-large-space;
-      width: $x-large-space;
+      width: 1rem;
       display: inline-block;
       font-weight: $font-weight-bold;
     }
+
+    .glyph {
+      line-height: unset;
+    }
   }
 
   .crumb-items {
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx
index cc5a9fa2586..04deb0a6c64 100644
--- a/packages/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx
@@ -7,14 +7,14 @@
  */
 
 import {
-    Component,
-    Element,
-    Event,
-    EventEmitter,
-    h,
-    Host,
-    Prop,
-    State
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  State,
 } from '@stencil/core';
 import animejs from 'animejs';
 import { createMutationObserver } from '../utils/mutation-observer';
@@ -181,7 +181,7 @@ export class Breadcrumb {
             {item.label}
           </span>
           {!isLastItem ? (
-            <span class="glyph glyph-16 glyph-chevron-right-small text-default-text"></span>
+            <span class="glyph glyph-18 glyph-chevron-right-small text-default-text"></span>
           ) : null}
         </div>
       );
diff --git a/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-dark-linux.png
index d6d0f0f67f1..7a66d2bcd6d 100644
Binary files a/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-light-linux.png
index e012ca11e0c..9e828f17ec8 100644
Binary files a/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/components/breadcrumb/test/breadcrumb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-light-linux.png differ