Xfce Wiki

Sub domains

Xfce Design Standards

The Xfce design standard aims at improving the consistency in the visual appearance of the Xfce desktop environment.

Color Palette


Color Hexadecimal RGB Name
#61757f (97, 117, 127) Midnight 1
#485e6b (72, 94, 107) Midnight 2
#344958 (52, 73, 88) Midnight 3
#263742 (38, 55, 66) Midnight 4
#070c0f (7, 12, 15) Midnight 5
#f1f3f5 (241, 243, 245) Grey 1
#d2d8dc (210, 216, 220) Grey 2
#bcc5ca (188, 197, 202) Grey 3
#a7b0b7 (167, 176, 183) Grey 4
#758087 (117, 128, 135) Grey 5
#c1ebf7 (193, 235, 247) Blue 1
#6acfec (106, 207, 236) Blue 2
#00aade (0, 170, 222) Blue 3
#006888 (0, 104, 136) Blue 4
#003445 (0, 52, 69) Blue 5
#d7fdb2 (215, 253, 178) Green 1
#aef766 (174, 247, 102) Green 2
#6acc0a (106, 204, 10) Green 3
#52a302 (82, 163, 2) Green 4
#3c7902 (60, 121, 2) Green 5
#fcf4c0 (252, 244, 192) Yellow 1
#fbeb83 (251, 235, 131) Yellow 2
#f9da02 (249, 218, 2) Yellow 3
#dcb102 (220, 177, 2) Yellow 4
#ad7702 (173, 119, 2) Yellow 5
#f3b6a6 (243, 182, 166) Red-Orange 1
#ec866a (236, 134, 106) Red-Orange 2
#e6461d (230, 70, 29) Red-Orange 3
#c02700 (192, 39, 0) Red-Orange 4
#851b00 (133, 27, 0) Red-Orange 5
#d4ade2 (212, 173, 226) Purple 1
#b97ace (185, 122, 206) Purple 2
#9c41bf (156, 65, 191) Purple 3
#753390 (117, 51, 144) Purple 4
#471d57 (71, 29, 87) Purple 5
#c6a798 (198, 167, 152) Brown 1
#a17a69 (161, 122, 105) Brown 2
#79503c (121, 80, 60) Brown 3
#603f2f (96, 63, 47) Brown 4
#4a3025 (74, 48, 37) Brown 5

Back to Top

Application Icons

Icon Colors

Xfce icons use the Xfce color palette and have a flat look using solid colors and no gradients.

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 Icon Dimensions Table below for details.

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 Icon Dimensions Table below provides details. Icons that are not square or circular should still be limited to the square size dimensions. Using a 48px icon as an example, the square should be 40x40px. A rectangular or other shaped icon should be reduced either vertically or horizontally to create the shape, but it should not exceed the 40px size in either direction. Circular icons are an exception to this rule because they appear slightly smaller when rendered. Using the 48px icon as an example, if creating a fully circular icon, the circle would be 42x42px.

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 Icon Dimensions Table below). Elements within icons should generally also use rounded corners.

Icon Position and Alignment

All icons should be centered both horizontally and vertically. All elements of the icon should be grid-aligned; elements are considered grid-aligned when they are positioned (when they start and end) at whole-numbered pixel positions. In Inkscape, you can show the grid by going to View > Page Grid. Grid-aligned icons have sharp, clear borders and elements. Grid-unaligned icons are blurry.

Scaling an icon to other sizes will make them and their elements grid-unaligned. It may also scale line thickness, and borders (which should always remain at 1px). Icon elements will have to be grid-aligned and line/border sizes checked at each size to avoid blurry icons.

Icon Dimensions Table

Icon Size Square/Rectangle Corner Radius Square Size (Margin) Circle Size (Margin) Border
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) 106px (11px) 0px

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 rDNS naming (e.g. org.xfce.appname). Please refer to this list of Xfce rDNS icon names for more examples. When developing applications or plugins, icons used within your code (like action or status icons) should use names provided in the FreeDesktop.org Icon Naming Specification.

Back to Top

Back to main Xfce Wiki page

Back to main Xfce documentation page