SVG Credit Card & Payment Icons: 6 Styles, 80 Icons

By Aaron F. November 6th, 2017

Introduction

Now available as a Node/NPM package! Check it out!

Anyone who knows me, or the type of developer that I am, knows that I always look at web development from a forward thinking & future proof stand point. One thing that has always bothered me is limitations on images - icons specifically. To accommodate the wide range of screen sizes & resolutions, we are often required to maintain multiple versions of single images so as to keep them looking crisp and sharp on all devices and screens. This of course creates a maintenance and organizational nightmare.

While still not the most popular option, SVG or Scalable Vector Graphic images have become my preferred option whenever possible. SVG images are an interesting option - even though it's not technically an image at all. SVG is actually a type of code, similar to HTML, that allows you to code vector shapes and graphics into a view. When called in your HTML or CSS like you would any other image, they render as such. The big difference being that SVG images are infinitely scalable, with zero loss of quality, regardless of dimensions, screen size, resolution, or any of the other nagging factors that affect images on the web.

I have spent the last year or so trying to convert any and all images on this website to SVG - where possible (photos are a no-go). The logo on this site, and all images on my client services portal have all been converted to SVG.

The Problem

I spent a few days scouring the web looking for some properly licensed SVG credit card icons that I could use for the payment portion of my client portal. While options were slim, I did find an icon set by Stuart Colville at Muffin Research (Excellent job Stuart!) that almost fit the bill. There were a few minor design issues with this icon pack - some of the icons were a different starting resolution from others, some of the colours were off, and they just didn't quite fit my design.

The Solution

With Stuarts icon pack as a starting point, I fired up Adobe Illustrator and went to work on ensuring equal dimensions across all icons, corrected the colour issues, and went ahead and put together the design I wanted to use (which I didn't even end up using!). I also added in a few new styles & designs.

The end result is what I can only call an absolutely stunning icon pack, ready for deployment with your project.

All icons have been sized to a starter resolution of 780px x 500px, stripped of unnecessary code, and minified for optimum performance.

Conclusion

A big shoutout to Stuart Colville for providing an awesome starting point for me to jump off of.

I hope you enjoy and find use in these credit card & payment option icons. I know I did! If you have any questions, as always, please do not hesitate to contact me.

Topics: Downloads, Graphics Design, Web Design & Development