Basic concepts, tips, and common mistakes
This is a basic and the most important concept of the Papirus icon theme. Pixel alignment in icon design refers to the precise arrangement of elements within an icon along the pixel grid (Shift-3 in Inkscape). It ensures that the edges and details of the elements align with the physical pixels on a monitor, creating a sharp and clean appearance, especially at smaller sizes. By aligning pixels to the grid, designers can avoid blurry or distorted visuals. This results in a more polished and more professional icon that will look good regardless of the screen it is displayed on, HiDPI or not.
Here is an example of how the icon will be rendered with pixel alignment:
and without it:
You maybe heard that SVG is a vector graphic format and that it perfectly scales to any size. The latter is more of a myth. It's true when an SVG file has a scale of 2x, 3x, 4x, etc., but not when it has a scale such as 1.5x or 0.75x.
Here is an example of how the 16px icon will be rendered for 12px, 16px, 24px, and 32px:
As you can see, only 1x and 2x scaling looks great. Other values look blurry because they lack pixel alignment.
flowchart TD
48(("48px")) ==>|"1. Group all objects [Ctrl+a] then [Ctrl+g]\n2. Scale the group and margins down 2 times to the edge\n3. Resize SVG to 24x24 [Ctrl+Shift+D]\n4. Ungroup it [Ctrl+Shift+G]\n5. Fix the size of the objects and align them to the 20x20 pixel grid with 2px margins (ignoring the bottom shadow)\n6. Save it as 24px"| 24(("24px"))
24 ==>|"1. Group all objects [Ctrl+a] then [Ctrl+g]\n2. Move the group 1px up and 1px left [Up] then [Left]\n3. Resize SVG to 22x22 [Ctrl+Shift+D] so that it has 1px margins\n4. Save it as 22px"| 22(("22px"))
24 ==>|"1. Resize SVG to 32x32 [Ctrl+Shift+D]\n2. Resize the objects to fit the 28x28 pixel grid with 2px margins\n3. Recreate all light outlines and shadows in 1px height\n4. Save it as 32px"| 32(("32px"))
32 ==>|"1. Resize SVG to 64x64 [Ctrl+Shift+D]\n2. Group all objects [Ctrl+a] then [Ctrl+g]\n3. Scale the group and margins up 2 times to fit the 56x56 pixel grid with 4px margins\n4. Ungroup it [Ctrl+Shift+G]\n5. Recreate all light outlines and shadows in 1px height\n6. Save it as 64px"| 64(("64px"))
24 ==>|"1. Resize SVG to 16x16 [Ctrl+Shift+D]\n2. Simplify the icon by removing the light outlines and shadows\n3. Resize all objects to fit the 16x16 pixel grid with no margins\n4. Save it as 16px"| 16(("16px"))
Follow these recommendations to choose between objects (rectangles, circles, etc.), strokes, and paths.
- Do not convert rectangles with rounded corners to paths when it can be avoided.
- Convert two and more rectangles with the same colours if their corners are sharp.
- Try to avoid converting circles to paths.
- Do not convert strokes to paths when it can be avoided.
- Combine Crtl-K strokes with the same colours and stroke-width.
- To prevent shadows/outlines from overlapping, group Ctrl+G them and set opacity to the whole group, not the individual objects. See shadow under > symbol in utilities-x-terminal.svg icon.
- Never use text objects in icons, use symbols from font.svg file instead.
- Never use clipPath in icons.
- Enable snapping to the grid and edges to snap objects and anchor points to the nearest pixel. It can help to achieve precise pixel alignment and prevents any accidental misalignment.
