Make it easy for designers to edit the SVG file in image editor and for themers to edit it in the text editor: Add effect layer rather than direct on the object for easy editing.Use illustrator effects rather than Photoshop effects (to make it vector rather than raster).Not compressed (compressed creates svgz and becomes unusable).Font Subsetting: None (use system fonts).Fill entire dimension (rotate to 45 deg for thin shapes).Display icons: canvas 16x16px - output 16x16 px.Dropdown icons: canvas 16x16px - output 16x16 px.Toolbar icons: canvas 16x16px - output 16x16 px.Action icons: canvas 12x12px - output 12x12 px.The palette in a file format suitable for Inkscape can be downloaded from Column 2: Inner outline - highlight (top to bottom).Column 1: Outer outline (top to bottom).Without highlight it blends into the background.With highlight, it stands out from the background.Highlight: inner border - light gradient.Lighting and gradients should have consistent amount and direction.Consistent curvature on rounded corners.Not too few details on higher resolutions.Not too much details on small resolutions.SVG (Scalable Vector Graphics) and PNG version in different sizes (12px, 16, 24) for unsupported browsers in 72ppi.Display icons: monochrome, 16x16 px canvas, output 16x16 px.Dropdown icons: monochrome, 16x16 px canvas, output 16x16 px.Toolbar icons: monochrome, 16x16 px canvas, output 16x16 px.Action icons: monochrome, 12x12 px canvas, output 12x12 px.Activity icons: gradient colour, 24x24 px canvas, output 24x24 px.Plugin icons: gradient colour, 16x16 px canvas, output 16x16 px.Scalable for multiple screen resolutions.Works well on light and dark background.Distinctive shape and form for its function or purpose.All other icons: Standardized from various sizes to 16x16 px monochrome.Action icons: Standardized from various sizes to 12x12 px monochrome.Activity icons: Increased in size from 16x16 to 24x24 px colour.Icon format: SVG preferred and PNG version for fallback.Use the following design guidelines to produce an icon that plays well with the core ones.
#Set icon html javascript upgrade
To make your activity modules look good, you need to upgrade your icons by adding some SVG files.