SVG - Scalable Vector Graphics
Vector icons are the way of the future, and SVG is the perfect base format. It’s a scalable format meaning that you can change it to any size without quality loss. You can use SVG on the web in many ways:
As an image
<img src=”/images/home.svg” />
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Another, and maybe more common, way of working with SVG, is as a base format. This way you can open your SVG in software like Adobe Illustrator, Sketch or Affinity Designer, edit it, scale it, colour it or whatever manipulation you fancy. Afterwards you just export it to your desired format for your project.
Compared to PNG, it’s not widely support in apps like Word, Powerpoint and Photoshop.
PNG - Portable Network Graphic
If you want total compatibility, PNG is the safe choice. Unlike SVG, PNG is a raster format (based on pixels) meaning you have no way of upscaling without losing quality. So you have to download your icons in at least the size you need for your project. That way you can always scale it down when needed.
If you are not sure which format to choose, go with PNG. PNG will work in Word, Powerpoint, Photoshop and you can insert them directly into email footer or your website. Compared to formats such as JPG, PNG contains information about transparency. So PNG can easily be added on top of colored background without editing them.
Base64 encoded icons (SVG or PNG)
You will find both PNG and SVG icons available in base64 format on Iconfinder. Base64 is a way of storing image data making it available without saving the icon as a file. You can copy-paste the base64 encoded icon directly in your CSS or HTML.
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iM ... z48L3N2Zz4=);
<img alt="Embedded Image" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjwh ... AiLz48L3N2Zz4=" />
You can use this technique to save server lookups and making your website load faster. You can read more in this blog post: http://blog.iconfinder.com/base64-encoding-assets-the-what-when-and-how/
AI - Adobe Illustrator
AI format is available for Iconfinder Pro users - AI is the vector format used by Adobe’s Illustrator app. If you are using Photoshop, you can easily drag and drop an AI files into a canvas giving you a vector based object you can use. And of course this format is compatible with Adobe illustrator.
CSH - Photoshop Custom Shape
CSH format is available for Iconfinder Pro users - CSH files contain custom shapes used by Photoshop. To use a custom shape you have to first open the downloaded file, then use the Custom Shape Tool. Select the shape in the Shapes drop-down list. This is perfect for icons you often use since they will be saved for later use in Photoshop.
ICO - Microsoft Windows icon format
If you need to use your icon for Windows applications or as a favicon for your website, ICO is the right format. The ICO format can also be used for favicons for a website. More about favicons: http://en.wikipedia.org/wiki/Favicon
ICNS - The Apple OS icon Format
Like the ICO format, ICNS is mostly for very specific purposes. ICNS is an Apple specific format only suitable for Mac OS X documents and apps. So if you need your icon for anything else, choose a different format.