Advice and answers from the Iconfinder Team

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” />

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 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.

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: 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.

Printing icons on paper

If you get the icon 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.

Did this answer your question?