Creating Icons

To export icons from Illustrator that can be colorized correctly use the following settings:

• SVG Version 1.0
• Image Location: Embed
• CSS Properties: Presentation Attributes

To keep parts of your icon colorized and avoid overwriting that part with the color of the sv design, use a class for that specific element. Use a text editor for implementing that class like this:

<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 444 444" enable-background="new 0 0 444 444" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F47C20;}
</style>
<rect x="19.6" y="52.1" class="st0" width="302" height="85.9"/>

All the other elements should NOT use classes but fill and stroke attributes like

<path fill="none" stroke="#000000" stroke-width="10" d="M321.6,235.3c0,5.6-4.5,10.1-10.1,10.1H29.6c-5.6,0-10.1-4.5-10.1-10.1
	V54.1C19.5,48.5,24,44,29.6,44h281.9c5.6,0,10.1,4.5,10.1,10.1V235.3L321.6,235.3z"/>

To colorize icons easily (black to white or vice versa) you can use SVG Splash on Mac OS X.