MartinSourada/EchoIconThemeGuidelinesDRAFT

Please refer to the final version of the guidelines instead.

Echo Icon Theme Guidelines DRAFT

Introduction

Echo is currently a new set of icons proposed for inclusion in Fedora. Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilzing high contrast and spots of vibrant colors.

Color palette

Having a common color palette is required to have a consistent look across all icons. Visual style is heavily influenced by the colors used.

The common practice when drawing icons is to use the palette as a base, applying it on large areas. Shading with gradients, creating highlight and shadows by changing value, and minor changes of saturation are also allowed and endorsed. Colors do not have to come exclusively from this set, as additional colors may be used. Starting from the base color and changing value, saturation or even hue slightly gives more consistant results that starting from arbitrary colors.

For your convenience, we prepared the palette for use in the following formats:

File:MartinSourada EchoIconThemeGuidelinesDRAFT echo-palette.gpl GIMP Palette] - also works in latest Inkscape (symlink ~/.gimp-2.4/palettes/ to ~/.inkscape/palettes/ and you'll have all of your GIMP palettes in Inkscape)

File:MartinSourada EchoIconThemeGuidelinesDRAFT echo-palette.svg SVG Palette]

Defining Echo Style Elements

There are many attributes that define an Echo icon. Let's have a look at the key visual aspects that define Echo:

File:MartinSourada EchoIconThemeGuidelinesDRAFT echo-elements.png File:MartinSourada EchoIconThemeGuidelinesDRAFT echo-elements.svg SVG]

1. object outline: All Echo icons are stroked with a thin outline. Each outline helps to define the shape of an icon and helps with identifying on different types of backgrounds. The outline should not be a solid 1px wide line, but it can vary a bit in width as well as in color. For some icons it is usefull to chose the outline color to be same, only darker, as the rest of the icon, in others metalic and grey colors (see the color palette section above) are used. Using linear gradients in outlines is desirable. For extra small (16x16) icons the prefered outline is #364e59 (Metalic 3). If the contrast is too strong or too low, you might change the color a bit. Using darker variant of icon color for the outline is also possible. At this size (16x16) outline must be a solid 1 px width line.

2. gradients Echo utilizes grays and gradients to provide a clean, yet detailed look.

3. drop shadow: In small, medium and big sizes and scalable (22x22 and bigger) icons each icon drops a simple shadow. The shadow is primarily bellow and little behind the icon. For shadow color use $2d2d2d (Grey 5), opacity settings and blur effect. It is left to the artist how much of the object shape the shadow retains, but less is preferable. More of the shape is usually retained only in isometric perspective. Extra small icons are without a shadow.

Many icons with flat shape also has a white 'inner outline'. This is used mostly to define the shape of the icon even more clearly and must be of solid white, preferably 2 pixels wide for a 48x48 icon and recpectively for other sizes - this means that, in contrast to object outline, it is scalable with the icon. In 16x16 icons the width is 1px (i.e. due to small size not scalled down any further).

Perspective

Echo employs the use of three (3) types of perspective:

straight (or head-on) File:MartinSourada EchoIconThemeGuidelinesDRAFT straight grid.svg SVG]

slightly tilted table File:MartinSourada EchoIconThemeGuidelinesDRAFT table grid.svg SVG]

most defining being the isometric grid File:MartinSourada EchoIconThemeGuidelinesDRAFT isometric grid.svg SVG]

[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_||[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_straight_grid.png,width=250] ||[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_table_grid.png,width=340] ||[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_isometric_grid.png,width=400] ||

to be used in creating extra small (16x16) icons and small (22x22 / 24x24) action icons

to be used for medium (32x32), large (48x48) and scalable action icons

to be used in the creation of all icons not covered by the previous two grids

Lightning

The light comes from above and little to left of the object. This results in having brightes places on the top side of an icon and little to the right side of an object, on the ball-like objects the highlight is however on the top-left of the ball. If icon is complex enough that it can be considered as composed from more objects treat the lightning as if it was actually composed from more objects - i.e. treat each section separately. Prefered types of gradients on flat parts of objects is a linear gradient, however for some shapes (mostly for action icons) radial gradient works better. Should be treated same for same shapes, otherwise it's decided on case by case basis.

If there are more objects in an icon the objects to the front usually drop a shadow not only bellow (as described in Defining Echo Style Elements section) but also on the object(s) behind them. The shadow is stronger if the objects are close.

[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_||[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_straight_light.png,height=250] ||[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_table_light.png,height=250] ||[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_isometric_light.png,height=250] ||

Icons size: extra small Note: Slight shading effect from the light (if at all) but no shadow for a cleaner 16x16 icon.

Icons category: actions (all size excluding extra small) Note: Shading effect from the light and shadow below object. If the objects were closer, there would be a slight shadow projected from the circle on to the square.

Note: Location and shape of highlights from the light and angle of the shadow cast by the shapes. Also note a slight hint of shadow appearing in front of the object as well as to the side.

Sizes

There are three major icon sizes an icon theme must address: Large, Small, and Extra Small.

Large

This size is mainly used for desktop icons and in the file manager views.

The bitmap size is 48×48 pixels. We strongly suggest creating a SVG version for this size since it can be easily scaled for other resolutions as well. Vector icons will be required for pixel resolution-independent interfaces as well, which define size by absolute units such as millimeters or inches.

Medium (optional)

This size is not required to be created. If missing, the Large SVG can be rendered into this 32x32 canvas. As 32x32 is a common size on platforms such as Windows XP or KDE, providing a pixel-perfect rendering of 32x32 pixels is suggested. It can be created out of the Large SVG fairly easily.

Small

"Small" is the common size for application toolbar icons.

Its bitmap size is 22×22 pixels for toolbars in KDE and the GIMP and 24×24 size (which is ¼ of 48×48) for Gnome. Just adding a 1 pixel empty space on all sides can make Echo icons useful on the Gnome desktop in the transition phase.

Extra Small

At 16×16 pixels, the "Extra Small" size is used in places such as lists (file dialog, message list in an e-mail client, etc.) and menus.

Which size an icon must have?

Actions: extra small, small, (large)

Animations: - all sizes, smaller (<=24x24) more needed

Applications: - small (22x22), large

Categories: small (22x22), large

Devices: extra small, large

Emblems: small, large

Emotes: extra small, small

International: these are country flags, so all

Mime Types: small, large

Places: extra small, large

Status: extra small, small, large

note about 32x32 - Each icon should be also rendered nicely in 32x32 size, because it's widely used in KDE, in many cases scalable icons are sufficient for that, we however highly encourage to make 32x32 png icons as well.

Scalable Icons

The scalable icons need to look at 48x48 precisely the same as 48x48 pngs, should be good looking up to 256x256 and down to 24x24 sizes and their default size must be 48x48. They must be available for all icons that has a png version and must not contain the Adobe Illustrator garbage (layers with display:none and previews, or what the images inside the svgs are).

Echo Icons in Grids

Pluses and Stars

Plus is used for action icons (thus often forward facing) symbolizing the creation of something new by the user. An example is the creation of a new contact in an address book. Such things are created by clicking on a button with a representative icon; whose icon name usually ends with "-new."

Plus SVGS: File:MartinSourada EchoIconThemeGuidelinesDRAFT plus ES.svg Extra Small] , File:MartinSourada EchoIconThemeGuidelinesDRAFT plus S.svg Small] , File:MartinSourada EchoIconThemeGuidelinesDRAFT plus L.svg Large]

Star should be used to note something that is new or upcoming in time. More generally, it symbolizes a state of being rather than the action of making it so (as the + would denote). Examples are such icons as mail-marked-unread and appointment-soon.

Star SVGS: File:MartinSourada EchoIconThemeGuidelinesDRAFT star ES.svg Extra Small] , File:MartinSourada EchoIconThemeGuidelinesDRAFT star S.svg Small] , File:MartinSourada EchoIconThemeGuidelinesDRAFT star SI.svg Small Isometric] , File:MartinSourada EchoIconThemeGuidelinesDRAFT star L.svg Large] , File:MartinSourada EchoIconThemeGuidelinesDRAFT star LI.svg Large Isometric]

Attach Points

An attach point is a location (x,y) on the icon that can be used as an anchor point for attaching emblems or overlays. If no points are specified, then default positions will be used.

[[Image:MartinSourada_EchoIconThemeGuidelinesDRAFT_attachPoints.png]

Attach Points is a list of points, separated by "|". The points are pixel coordinates from the top left corner of the icon, except for SVG files, where they are specified in a 1000x1000 coordinate space that is scaled to the final rendered size of the icon. For additional technical information written by Alex Larsson.

Common Filenaming

Echo uses the freedesktop's Icon Naming Specification .

To help with the transition to the new naming scheme, Icon Naming Utilities are available. This utility maps the icon names used by the GNOME and KDE desktops to the icon names proposed in the Icon Naming Specification linked above.

Terms of use

Same as Tango, icons are cc-by-sa with icon naming licensed under the GPL (see the bottom of Tango Project page ).

References

Tango Icon Theme Guidelines

Icon Naming Specification

Icon Theme Specification

original Guidelines