# Iconography > Icons are symbols that can be used to provide meaning in addition to text labels. Clear and consistent icon usage helps users navigate and complete their tasks. The [icon library](/icons/) provides all the UI icons needed for digital services. These guidelines keep our icons identifiable and consistent across different services. ## Designing a new icon Kesko Design System’s iconography shares the same rounded, curved language as our typography and other UI elements. They are designed to work together as one cohesive system. Icons are small, but they show up everywhere: in navigation, on buttons, next to labels, across every screen of every digital Kesko product. Most users never consciously notice them, which is exactly the point. But when an icon looks off, or doesn’t quite match the others, people feel it even if they can’t name it. Every icon in our library is a brand touchpoint in the very practical sense that it’s part of what Kesko looks and feels like to the people using our products every day. They are seen and interacted with millions of times every week. It’s worth getting them right. This guide explains how the icons in this library are built and why. Follow it when you’re drawing a new icon, and the result will fit naturally alongside everything already here. ## Basic design principles Kesko UI icons are line icons, meaning all the elements are drawn with consistent 1.5 px strokes that follow the same visual language as Kesko brand iconography used in all Kesko communication. All icons are drawn and delivered at 24×24 pixel size. Stroke corners are rounded and stroke ends are straight with slightly rounded corners. Each icon has one stylistic gap added somewhere along its stroke, which is an essential part of Kesko’s iconography. For style reference look for already existing [Kesko UI icons](/icons/) and [K Brand iconography](https://kdam.kesko.fi/guidelines/guide/572fcb4c-b2b4-4833-96ff-fd4977b20801/page/29055f9a-0546-4f66-bd6a-2319a8ec9485). ## Grid All Kesko UI icons are drawn on a **24x24 px grid**. The center of the canvas is **x=12**, **y=12**. This is your primary reference point for all composition decisions. The circle on the background grid is not a size guide, but it helps you evaluate the optical balance of the icon. ## Padding The grid contains **1 px padding**. This ensures icons will retain their desired scale and surrounding white space when exported. Do not fill the whole canvas with an icon. Only extend artwork into the padding area when smaller parts of the icon need some extra space. ## Stroke width Stroke width is always **1.5 px**. All elements are  made of 1.5 px strokes and this should be consistent across all the icons. Before export, **all strokes are outlined and icons flattened**, so the icon scales right in size. ## Corners All outer corners are rounded. Inner corners can be sharp. The standard outer corner radius is **0.75 px**, which equals half the stroke width. When the real-world object that the icon represents has rounded shapes, bigger rounding can be used to represent those shapes. Preferable corner radii are 0.75, 1.75, and 2.75 px. Make sure the inner corner’s radius stays in the relation to the outer corner’s radius, so that the stroke width stays uniform. Inner corner’s radius is always outer corner radius minus 1.5 px when the outer corner’s radius is bigger than 1.5 px. Before exporting the icon, **outline all the strokes and add 0.4 px rounding to the corners of all stroke ends**. A 0.4 px corner radius is also used when sharper corners are needed, for example on the arrow tips. ## Stylistic gap To achieve the Kesko icon style, a gap is added to one of the strokes. The width of a gap is **1.5 or 2 px**, depending on its location on the pixel grid and the size of the element it is cut from. Especially on basic UI icons, if the gap seems to disturb the recognizability of the icon, the icon can be designed without the gap. ## Cutting the stroke To keep the icon style consistent, straight strokes are cut either horizontally or vertically, not diagonally. On circular shapes, use the object’s center as a guide for cutting the stroke. On circles the stylistic gap is always cut at a 45° angle, at either the upper left or right. ## Aligning elements To make sure icons will look crisp and render properly on all screens, align stroke edges to pixel gridlines. As the stroke width is 1.5 px, you can’t align both sides of the stroke to the gridline. To make the icon look as crisp as possible on lower resolution screens, always **align the outer border of the shape to the gridline**. This gives the icon’s shape a better overall look when the outer border renders without sub-pixel blurriness. This choice also adds to the visual consistency of the icon library. Also, make sure the horizontal and vertical stroke ends are aligned to the grid, so that they render sharp on the screen. For narrow gaps between two parallel strokes, or other elements, make sure there’s at least one whole pixel’s width between them, not two half pixels. Otherwise the gap renders blurry on lower resolution screens. For small closed shapes, such as squares and circles, make sure **the center is aligned to the grid** and there’s at least **one whole pixel inside** of them. By following this rule you make sure that the shape’s inner space renders cleanly rather than blurring into the stroke. Again, it’s preferred to have the outer border of the shape aligned to gridlines to keep these shapes crisp. The smallest shape used in Kesko UI icons is a 1.5x1.5 px square, with 0.4 px rounded corners. Always align two sides of the square to the gridline. With some icons, like arrows, the stroke needs to be symmetrically centered to keep the icon centered. There’s no need to align one side of the stroke to the gridline. It’s better to keep the stroke centered for better symmetry. This way the icon works better in round buttons, for example. ## Text and letterforms When an icon has text, letterforms or punctuation as an element, always use Kesko’s brand typeface **Skatta Sans Black**. Do not use any other fonts or draw new letterforms in any other style. ## Icon naming and exporting Once an icon is finished, it needs a clear, consistent name and a clean export so it works correctly wherever it’s used in the system. Icon names should describe what the icon represents, not how it looks. Use lowercase, hyphen-separated names. If a similar icon already exists (e.g. arrow-left), follow its naming pattern rather than inventing a new one (e.g. left-arrow). Before export, **make sure every stroke has been outlined and the icon is fully flattened into a single layer or group**. An icon that still has live strokes will not scale or render correctly once exported. Icon should be **24x24 px** in color **#000000**, with no background color. Once it’s ready, [contact support](/help/), so it can be made available to everyone using the system.