Icons are pictorial representations of functions and objects, important not only for aesthetic reasons as part of the visual identity of a program, but also for utilitarian reasons as shorthand for conveying meaning that users perceive almost instantaneously. Well-designed icons improve the visual communication and strongly impact users' overall impression of visual design. Last but not least, icons are space-saving and improve usability by making programs, objects, and actions easier to identify, learn. Icon use should be consistent throughout the interface.
Breeze icons come in a variety of sizes depending on their context. The following lists the current sizes in use:
As mentioned above there's mainly two styles for Breeze icons. When creating a new icon for Breeze make sure to follow these rules as it's important to keep consistency within all the elements in the theme. With Breeze we'd like to keep things simple, most monochromatic icons must fit within a squared area set by guides though the graphics don't need to be squares themselves. Icons too, should be 99.9% of the time pixel perfect, this simply means that all objects must be aligned to the grid (as in the Inkscape grid), this results in crisp icons once in use.
In the above list we have the sizes for the icons set up, however, the icons or rather the graphics themselves do not fill the entirety of the canvas (the document/workspace) this is because while some icons can be created to fit within a square area others whose inspiration comes from real-life objects which are not squares per se would not fit, for short, we too want to keep things recognizable, not stretching things over the canvas to fit the area set by the guides but keep a correct aspect ratio of the final graphic and what it should represent.
As you see in the images above we have guides in place, this is so that the graphics you see in the apps are all at the same height though some may have different width. The guides are in place for all the icons, the image below illustrates this:
Visual representation of the area defined by the guides. Icons don't necessarily have to be squares, they simply need to have a proper aspect ratio. Vertically aligned icons are narrower but have the same height as wider icons.
Whether the graphics are narrower they have the same height. Placed in a taskbar or a dock this results in a seamless app list presentation.
These are the simplest of icons in terms of labor. When doing these icons check the file index.theme located in the root of the Breeze folder for hints of where the icon will be used.
Icons in these sizes use 1 px strokes and sometimes fill on some areas depending on the graphic.
Generally when adding symbols to graphics such as "+", "-", etc. they should be placed at the bottom right corner of the bigger graphic and there must be 1 px of blank space between each element.
Most of the icons this size (32 px) were used for System Settings but they're also used by Kickoff for the app categories. These icons make use of smooth, vibrant, fresh and aligned elements colored by gradients and they mostly consist of three parts: a background, a front symbol and a long shadow.
These icons don't have a particular shape, they simply fit together despite their differences. Shapes can be either squares, rectangles, circles, have resemblance of real-life objects, etc.
The front symbol is what dictates the long shadow, the shadow always has the same gradient, no exception. And it takes up the whole object even if said object has only strokes and no fill.
The angle of the long shadow is 45° towards the bottom right of the symbol.
The difference between 32 and 48 px icons is a shadow at the bottom of the 48 px icons and a bit more of detail. Since there more space for more pixels we've used them. 48 px icons can have more long shadows, and they also have a 1 px hard shadow at the bottom, whether they're rectangular/squares or circles.
Application icons are at 48x48 px, an important thing though is that when doing an application icon you want to keep established brands mostly intact or at least that they don't differ too much from the original.
And for apps that are free software try to come up with something creative, a better representation of what the software does, a feature an UI element, etc. The last thing we want is to keep using the same old unrepresentative icon.
Folders and mimetypes use this size the most but so do dialog icons. Folders follow the same principle of a background and a symbol, but no long shadow under the symbol. The symbol however does not use a gradient but a contrasting color to that of the background. It's not transparent.
The symbol (when using a stroke-based design) uses 1 px strokes, it can be mixed with fill areas or it can be completely fill.
The size of the symbol is 20x20 px and is centered to the front of the folder.
Folder dimensions: 52x58 px - smooth gradient on the front, a long shadow on the back, a darker gradient also on the back and light details at the top of the front and back areas.
Mimetypes have a common shape, these shapes and combinations are included in the folder resources/mime_combinations. The symbols that define each mimetype should be related to the files or the software that generates these files.
Symbols use 1 px strokes too, just like folders.
Small sized mimetypes use the same symbol (only redrawn for 16 px) as the bigger icon. The color combination is also within the resources/mime_combinations folder files. Rules for 16 px icons (as seen above) apply for these too.
Dialog icons are used on .. well dialogs such as:
Or occasionally in Dolphin's preview sidebar (dialog-information).
With the exception of dialog-password the other icons use the same shape, 1 px strokes, long shadows and vibrant gradients.
The symbol is centered to the rectangular area of the speech bubble.