diff --git a/angular/src/components/icon.component.ts b/angular/src/components/icon.component.ts
index a32948cbae1..d30ce20e8ca 100644
--- a/angular/src/components/icon.component.ts
+++ b/angular/src/components/icon.component.ts
@@ -18,6 +18,21 @@ const IconMap: any = {
   "fa-apple": String.fromCharCode(0xf179),
 };
 
+/**
+ * Provides a mapping from supported card brands to
+ * the filenames of icon that should be present in images/cards folder of clients.
+ */
+const cardIcons: Record<string, string> = {
+  Visa: "card-visa",
+  Mastercard: "card-mastercard",
+  Amex: "card-amex",
+  Discover: "card-discover",
+  "Diners Club": "card-diners-club",
+  JCB: "card-jcb",
+  Maestro: "card-maestro",
+  UnionPay: "card-union-pay",
+};
+
 @Component({
   selector: "app-vault-icon",
   templateUrl: "icon.component.html",
@@ -59,6 +74,7 @@ export class IconComponent implements OnChanges {
         break;
       case CipherType.Card:
         this.icon = "fa-credit-card";
+        this.setCardIcon();
         break;
       case CipherType.Identity:
         this.icon = "fa-id-card-o";
@@ -102,4 +118,11 @@ export class IconComponent implements OnChanges {
       this.image = null;
     }
   }
+
+  private setCardIcon() {
+    const brand = this.cipher.card.brand;
+    if (this.imageEnabled && brand in cardIcons) {
+      this.icon = "credit-card-icon " + cardIcons[brand];
+    }
+  }
 }
diff --git a/angular/src/images/cards/amex-dark.png b/angular/src/images/cards/amex-dark.png
new file mode 100644
index 00000000000..ac1b075975d
Binary files /dev/null and b/angular/src/images/cards/amex-dark.png differ
diff --git a/angular/src/images/cards/amex-light.png b/angular/src/images/cards/amex-light.png
new file mode 100644
index 00000000000..ac1b075975d
Binary files /dev/null and b/angular/src/images/cards/amex-light.png differ
diff --git a/angular/src/images/cards/diners_club-dark.png b/angular/src/images/cards/diners_club-dark.png
new file mode 100644
index 00000000000..a5d23233eb8
Binary files /dev/null and b/angular/src/images/cards/diners_club-dark.png differ
diff --git a/angular/src/images/cards/diners_club-light.png b/angular/src/images/cards/diners_club-light.png
new file mode 100644
index 00000000000..e2e33a24acd
Binary files /dev/null and b/angular/src/images/cards/diners_club-light.png differ
diff --git a/angular/src/images/cards/discover-dark.png b/angular/src/images/cards/discover-dark.png
new file mode 100644
index 00000000000..2ed6f6f9422
Binary files /dev/null and b/angular/src/images/cards/discover-dark.png differ
diff --git a/angular/src/images/cards/discover-light.png b/angular/src/images/cards/discover-light.png
new file mode 100644
index 00000000000..755c6957c63
Binary files /dev/null and b/angular/src/images/cards/discover-light.png differ
diff --git a/angular/src/images/cards/jcb-dark.png b/angular/src/images/cards/jcb-dark.png
new file mode 100644
index 00000000000..1cb484d91e5
Binary files /dev/null and b/angular/src/images/cards/jcb-dark.png differ
diff --git a/angular/src/images/cards/jcb-light.png b/angular/src/images/cards/jcb-light.png
new file mode 100644
index 00000000000..2b89f5b9af2
Binary files /dev/null and b/angular/src/images/cards/jcb-light.png differ
diff --git a/angular/src/images/cards/maestro-dark.png b/angular/src/images/cards/maestro-dark.png
new file mode 100644
index 00000000000..4a4879b56fc
Binary files /dev/null and b/angular/src/images/cards/maestro-dark.png differ
diff --git a/angular/src/images/cards/maestro-light.png b/angular/src/images/cards/maestro-light.png
new file mode 100644
index 00000000000..2329738a197
Binary files /dev/null and b/angular/src/images/cards/maestro-light.png differ
diff --git a/angular/src/images/cards/mastercard-dark.png b/angular/src/images/cards/mastercard-dark.png
new file mode 100644
index 00000000000..cd8062635de
Binary files /dev/null and b/angular/src/images/cards/mastercard-dark.png differ
diff --git a/angular/src/images/cards/mastercard-light.png b/angular/src/images/cards/mastercard-light.png
new file mode 100644
index 00000000000..f87ae25911d
Binary files /dev/null and b/angular/src/images/cards/mastercard-light.png differ
diff --git a/angular/src/images/cards/union_pay-dark.png b/angular/src/images/cards/union_pay-dark.png
new file mode 100644
index 00000000000..248be7c3307
Binary files /dev/null and b/angular/src/images/cards/union_pay-dark.png differ
diff --git a/angular/src/images/cards/union_pay-light.png b/angular/src/images/cards/union_pay-light.png
new file mode 100644
index 00000000000..2d75aa9070d
Binary files /dev/null and b/angular/src/images/cards/union_pay-light.png differ
diff --git a/angular/src/images/cards/visa-dark.png b/angular/src/images/cards/visa-dark.png
new file mode 100644
index 00000000000..0705b68e7d4
Binary files /dev/null and b/angular/src/images/cards/visa-dark.png differ
diff --git a/angular/src/images/cards/visa-light.png b/angular/src/images/cards/visa-light.png
new file mode 100644
index 00000000000..3dc8ae5093a
Binary files /dev/null and b/angular/src/images/cards/visa-light.png differ
diff --git a/angular/src/scss/icons.scss b/angular/src/scss/icons.scss
new file mode 100644
index 00000000000..4d2ea4594e4
--- /dev/null
+++ b/angular/src/scss/icons.scss
@@ -0,0 +1,44 @@
+$card-icons-base: "~@bitwarden/jslib-angular/src/images/cards/";
+$card-icons: (
+  "visa": $card-icons-base + "visa-light.png",
+  "amex": $card-icons-base + "amex-light.png",
+  "diners-club": $card-icons-base + "diners_club-light.png",
+  "discover": $card-icons-base + "discover-light.png",
+  "jcb": $card-icons-base + "jcb-light.png",
+  "maestro": $card-icons-base + "maestro-light.png",
+  "mastercard": $card-icons-base + "mastercard-light.png",
+  "union-pay": $card-icons-base + "union_pay-light.png",
+);
+
+$card-icons-dark: (
+  "visa": $card-icons-base + "visa-dark.png",
+  "amex": $card-icons-base + "amex-dark.png",
+  "diners-club": $card-icons-base + "diners_club-dark.png",
+  "discover": $card-icons-base + "discover-dark.png",
+  "jcb": $card-icons-base + "jcb-dark.png",
+  "maestro": $card-icons-base + "maestro-dark.png",
+  "mastercard": $card-icons-base + "mastercard-dark.png",
+  "union-pay": $card-icons-base + "union_pay-dark.png",
+);
+
+.credit-card-icon {
+  display: block; // Resolves the parent container being slighly to big
+  height: 19px;
+  width: 24px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+@each $name, $url in $card-icons {
+  .card-#{$name} {
+    background-image: url("#{$url}");
+  }
+}
+
+@each $theme in $dark-icon-themes {
+  @each $name, $url in $card-icons-dark {
+    .#{$theme} .card-#{$name} {
+      background-image: url("#{$url}");
+    }
+  }
+}