-
Notifications
You must be signed in to change notification settings - Fork 146
Guidelines
When adding a new icon to our Circle & Square themes you must meet the following design guidelines. You may be asked to make further changes if your design doesn't fit well with the rest of the theme or otherwise if we think it's possible to improve on the design.
These guidelines do not cover the Shine, uTouch, Hexagon, and Fold themes which are all currently unmaintained. If you wish to begin maintaining one of those themes and want a copy of the guidelines then let us know.
Each icon is split into four basic components, layered as follows from bottom to top:
- Base shadow - the drop shadow of the baseplate which shouldn't be changed.
- Baseplate - the main shape on which the symbol is placed.
- Symbol shadow - a shadow of the symbol layered below it.
- Symbol - the key part of the icon which identifies which app it is for.
The circle baseplate is a 46px diameter circle located at pixel coordinate (1, 1). The symbol sits central within the circle and the symbol shadow located 1px to the right and 1px down from there.
The square baseplate is a 46px diameter square with 4px rounded corners, located at pixel coordinate (1, 1). The symbol sits 1px higher than central within the square and the symbol shadow located 1px down from there.
The shape or positioning of the baseplate should be not changed as part of the design process. However you do have to choose a colour which compliments those used in your symbol. This is applied as a linear gradient to the baseplate, varying from the top of the baseplate to the bottom. The top and bottom stop colours can differ only in lightness, with the top being 10L lighter (4L lighter from Inkscape version 1.0 on) than the bottom colour (achieve this using HSL as the colour mode).
This is the main part of the icon which identifies the app.
If the symbol is a perfect square (or close to) it should have a 24px diameter. If the symbol is a perfect circle (or close to) it should have a 30px diameter. Other symbols should aim to fall between 26px and 28px in diameter. Some existing icons don't use symbols and instead fill the baseplate; these are discouraged with rare exceptions granted on a case by case basis.
Always check how the icon looks when viewed at 48px & 96px to assess for optical illusions. Often symbols of unusual shape (e.g. triangles) will look off centre and may need adjusted positioning. This also can differ between circle and square so be sure to check both.
Something something isometric camera. TODO: write this paragraph.
All straight lines and preferably most other shapes should be aligned to the pixel grid, ensuring they're not blurry when viewed at 48px and 96px. You may want to check if they're still aligned when viewed at other sizes but this is not a requirement.
Try and adapt the original icon of the app to the Numix style, rather than coming up with one from scratch. This means the icon stays recognisable but also alleviates the need for too much creative thinking. We make exceptions for this in cases where the original icon is unsuited for adaption and instead ask for an original (but still descriptive of the apps use) design.
Avoid using a symbols that are a single solid shape, instead using multiple shapes of different colours to construct your design. These shapes should form a symbol that's quasi flat when possible. At the same time, avoid making the symbol too complicated; Numix icons aren't designed with detail in mind. We do sometimes make an exception, particularly for game icons, but you shouldn't be using hundreds upon hundreds of nodes to create the design.
Using an existing Numix icon as a building block to make yours is perfectly acceptable and encouraged for new contributors.
This is then coloured #000000 and with opacity set to 10%. Don't use the alpha value to achieve opacity. To create the symbol shadow duplicate the entire symbol and then path union to merge these together.
For other shadows within the symbol position them such that the light source would be to the top left for circle and directly above for square. Retain the same 1px move
Numix is known for its use of bright colours. They should be vivid without being harsh, and shouldn't contrast badly. Don't use #ffffff if you want white, try #f9f9f9 which is softer. Similarly don't use #000000 for black, try #2d2d2d instead.
Avoid having a symbol which is simply a plain white shape. If you really have to, tint it with the same colour as the background.
Don't use strokes anywhere in your final design. This SVG property is not universally implemented across Linux distributions and in particular can break the appearance of the theme with Qt based applications. Designs which looks like strokes are fine, provided they're implemented as paths.
Don't use clipping or masking to create any shapes you use. While it might seem an easier way to make shadows (that could be automated even) they're non-standard SVG features. Use will cause breakages across a wide variety of desktops and applications.