This article is directed to Iconfinder's customers who are not sure what is the most suitable format for their intended use of the icon or illustration. Below, you can find all formats available on Iconfinder and their optimal use case.
If you are a designer looking for information about file formats, check out the article Supported file formats.
SVG - Scalable Vector Graphics
Vector graphics 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” />
Inline HTML
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
With CSS
#vector-image {
background-image: url(“/images/home.svg”);
}While it SVG is supported by most browsers, it’s has some quirks and may require a bit of getting used to. SVG is based on XML, much like your website markup, which means that it can be manipulated directly by Javascript or CSS. This opens a whole new world of possibilities for the creative front-end developer or tech-savvy designer.
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 the file 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 files (SVG or PNG)
You will find both PNG and SVG files available in base64 format on Iconfinder. Base64 is a way of storing image data making it available without saving the product as a file. You can copy-paste the base64 encoded file directly in your CSS or HTML.
CSS
#vector-image {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iM ... z48L3N2Zz4=);
}HTML
<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: Encoding assets - what, when and how
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 graphics 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.
IconJar (MacOS)
IconJar is a Mac desktop application to manage your collection of icons. It contains vector (SVG) icons with their meta data such as tags, author, license, etc. Iconfinder gives you an easy way to download icons and packs directly in IconJar format and open them in the application.
Read more about the Iconjar format: How to download the Iconjar format?
Printing graphics on paper
If you get the graphic in SVG format, you can adjust it to any size and DPI you need.
If they are making a design in e.g. Photoshop and delivering the graphics in non-vector format, you should simply ensure that the art-board in Photoshop has the right dimensions and DPI. Then, import the SVG file into Photoshop. For print, you should avoid using the PNG files from Iconfinder; SVG is the right choice.