Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
design:start [2024/04/29 21:39] – kevinbowen | design:start [2024/05/09 08:34] – Add initial icon information, dimensions newhoa | ||
---|---|---|---|
Line 9: | Line 9: | ||
===== Color Palette ===== | ===== Color Palette ===== | ||
+ | |||
+ | Source: | ||
+ | * **[[https:// | ||
{{xfce-color-palette.svg? | {{xfce-color-palette.svg? | ||
Line 59: | Line 62: | ||
---- | ---- | ||
- | ===== Icons ===== | + | ===== Application |
+ | |||
+ | |||
+ | ==== Icon Colors ==== | ||
+ | |||
+ | Xfce icons use the [[design: | ||
+ | |||
+ | |||
+ | ==== Icon Sizes ==== | ||
+ | |||
+ | Xfce supports icon sizes of 16px, 24px, 32px, 48px, 64px, 96px, and 128px. Application icons should be provided for all supported sizes. | ||
+ | |||
+ | |||
+ | ==== Icon Margins ==== | ||
+ | |||
+ | The icon sizes above list the final size of the SVG or the PNG, the full page size. But all icons above 16px should have empty space around the icon content as margins. For example, for a square 64px icon, the square shape would be 56x56px, leaving 4px of empty space on all sides (making the final icon size 64x64px). The margin space needed increases as icon size increases. See the [[design: | ||
+ | |||
+ | |||
+ | ==== Icon Shapes ==== | ||
+ | |||
+ | There are no hard rules on icon shapes, but the main content of the icon should stay within certain limits and provide a certain amount of margins. The [[design: | ||
+ | |||
+ | |||
+ | ==== Icon Borders ==== | ||
+ | |||
+ | Icons should have a 1px border at all sizes except at 128px. 128px icons are used as scalable icons and have no borders. | ||
+ | |||
+ | |||
+ | ==== Icon Corners ==== | ||
+ | |||
+ | Square and rectangular icons use rounded corners (see the [[design: | ||
+ | |||
+ | |||
+ | ==== Icon Position and Alignment ==== | ||
+ | |||
+ | All icons should be centered both horizontally and vertically. All elements of the icon should be grid-aligned; | ||
+ | |||
+ | <note important> | ||
+ | |||
+ | |||
+ | ==== Icon Dimensions Table ==== | ||
+ | |||
+ | ^ Icon Size ^ Square/ | ||
+ | | 16px | 2px | 16px (0px) | 16px (0px) | 1px | | ||
+ | | 24px | 3px | 20px (2px) | 22px (1px) | 1px | | ||
+ | | 32px | 3px | 28px (2px) | 30px (1px) | 1px | | ||
+ | | 48px | 4px | 40px (4px) | 42px (3px) | 1px | | ||
+ | | 64px | 6px | 56px (4px) | 60px (2px) | 1px | | ||
+ | | 96px | 8px | 80px (8px) | 82px (8px) | 1px | | ||
+ | | 128px | 8px | 104px (12px) | ||
+ | |||
+ | |||
+ | ==== Icon Detail ==== | ||
+ | |||
+ | Icons should be fairly simple and easy to understand. While a larger icon may be more detailed, detail in smaller icons should be reduced if needed to keep icons readable at small sizes. | ||
+ | |||
+ | |||
+ | ==== Icon Naming ==== | ||
+ | |||
+ | Application icons use the [[wp> | ||
+ | |||
+ | |||
[[|Back to Top]] | [[|Back to Top]] |