Credit card logos for card vault items

Feature name:

  • Credit card logos for card vault items

Feature Description

Benefits:

  • This will make it easier to find a credit card in list, and look more elegant
  • Streamlines the interface with login items which also uses specific logos as icons

Clients / Repos Affected:

  • Web
  • Browser
  • Mobile
  • Desktop

Timeline to completion (estimate):

ETA: Q4/2021

Any input/ ok to start work? @tgreer @kspearrin

1 Like

Thanks @linusaarnio! Sounds good. Just a couple of items to note:

  • Currently, we don’t have those icons in the set, so you’ll want to create them to match the size/padding that we have today.
  • We do have an icon update forthcoming that may require a pause while things get merged, but there won’t be any conflicting icons for cards.
  • You’ll want to respect the ‘Hide Website Icons’ setting within the clients, as some users may not want to flaunt their card brands :wink:
1 Like

Great, I’ll get on it then!

Thanks for pointing out the “Hide website icons”-setting, I didn’t know about it from before :blush:

2 Likes

This is now done for the js clients, with credit card logos shown for all available brands, based on the brand the card is.

Images are a modified (changed size to look better in the 20x20 box for icons) version of Figma - Payment Methods Icon Set | A set of the 39 most used icons for your next e-commerce checkout form. With special attention pa... which is licenced under CC BY 4.0 by Arthur Chayka

Code is added in jslib, images in the respective client repos. Here are the PR:s:

  1. Select an image to display for credit cards based on the brand. by linusaarnio ¡ Pull Request #537 ¡ bitwarden/jslib ¡ GitHub
  2. https://github.com/bitwarden/browser/pull/2163
  3. Add credit card logos to allow displaying icons based on brand by linusaarnio ¡ Pull Request #1149 ¡ bitwarden/desktop ¡ GitHub
  4. Add credit card logos to allow displaying icons based on brand by linusaarnio ¡ Pull Request #1280 ¡ bitwarden/web ¡ GitHub

Screenshots can be found in client repo PR:s.

5 Likes

Great stuff! Thanks, @linusaarnio!

I think we’re close to a code freeze at the moment, but maybe @eliykat could provide more detail around review/merge timelines.

1 Like

The screenshots look great, @linusaarnio! The team is a bit snowed under with the upcoming release and a few community PRs already on the backlog, so I can’t give you any firm timeline for review, but we’ll ping you on Github once we’ve had a look. :slight_smile:

2 Likes

The plan is to have a release at the end of November and in the middle of December :slight_smile:

3 Likes

I’m happy to announce that all PR’s have been reviewed and merged. We are now proceeding into QA and if no issues are found, this is going to be included in the Feb release.

@linusaarnio Thank you again for your great work on this!!

4 Likes

Closing this topic, as thanks to @linusaarnio the new card icons were included in the Feb release.

1 Like