Skip to main content

Icons

Atlas’ own UI icon set gives the team full control over the visual style to match the UI design language and allows for any custom icon which may not be found in third-party icon sets.

Core Features​

Variable Stroke Width​

All Atlas UI Icons are drawn with 1px wide strokes but we preserved the ability to change the stroke width through a property. There are two pre-defined weights: thin (1px) and grid (2px).

Live Editor
Result
Loading...

Variable Size​

Each icon is drawn in two variants:

  • small (16px canvas) — These are really small icons, eg. to use inside small or medium sized buttons. They are so small that most icons will not be properly readable when set to bold.
  • medium (24px canvas) — Most of these icons have a bit more detail than their small variants and they all work equally well in thin and bold.
  • And additionally: large (32px canvas) — These are the medium-sized icon variants, scaled up to 32px.
Live Editor
Result
Loading...

Variable Stroke or Fill Color​

Atlas UI Icons are monochrome — but they can have any design token color:

Live Editor
Result
Loading...

Browse the Icon Set​

You can see the whole Atlas Icon set on the Icon component page.

Getting Started​

Make sure you have access to the Atlas repository on GitHub. Check out the code and create a new branch to add your changes. You will mostly work inside the directory packages/components/src/Icon.

Guidelines​

Atlas Icons are exported as SVG files. This means that the browser reads the SVG code and renders the icons while it renders the page. This has the advantage of being able to resize and color icons without the need to export a countless number of images for all possible variations. However, this means that the SVG files need careful preparation in order to render exactly as intended.

Grid​

By drawing onto the pixel grid, the icons render crisp and are clearly readable. The guides for key shapes help to balance size and proportion.

  • Atlas Icons are drawn precisely onto the pixel grid (16px and 24px).
  • Objects are aligned to the key shape guides (in the Illustrator file).
  • Objects do not extend into the safety padding unless needed for optical correction.
Align design elements to the pixel grid.
Avoid random decimal points in the x- and y- coordinates.
Objects stay inside the safety padding (1px for 16px icons, 2px for 24px icons)
Avoid placing objects inside the safety padding
Extend objects into the safety padding if you need more space or for optical correction
Don’t avoid the safety padding if the drawing would look too crammed

Drawing Vectors​

Draw precisely and produce tidy files to avoid unexpected rendering issues:

  • Set all lines to center (when we dynamically change the stroke width, the lines grow equally in all directions).
  • Set all line caps to straight.
  • Never set corners to rounded.
  • Manually draw rounded corners with curves instead of using rounded corners (to keep the same appearance when we scale an icon).
  • There are two border radii: 0.5px (on the 16px canvas) and 1px (on the 24px canvas).
Set all lines to center
Never set lines to inside or outside
Set all line caps to straight
Never set line caps to rounded
Draw rounded corners with bezier tools
Never set corners to rounded
  • Combine all overlapping shapes (boolean operations, eg. via Pathfinder palette in Illustrator)
  • Do not use masks (apply them to create simple shapes)
  • Apply all transforms like eg. skew or rotate
  • In general: apply all non-destructive operations, make sure that your drawing only consists of very simple paths and shapes
  • Clean up anchor points, set them to full or half decimal points to render 1px wide strokes which are aligned perfectly to the pixel grid
  • Delete any anchor point which you do not really need
Always combine overlapping shapes into a single shape
Avoid combined shapes in your drawings
Apply all transforms — eg. rotation
Don’t keep non-desctructive transformations
Delete all unnecessary anchor points (zoom in very closely)
No matter how tiny, do not keep faulty or unnecessary anchor points

Style​

All Atlas UI Icons share the same visual style. Follow the instructions below to keep any new icon you may add consistent with the whole set.

Lines & Corners​

  • Draw with outlines instead of solid shapes (although there are a few exceptions).
  • Always set line caps to straight, never rounded.
  • Set rounded corners to either 1px or 0.5px border radius (use the Corners Dialog from Illustrator’s Life Corners feature).
  • Do not apply rounded corners everywhere but only where it makes sense.
  • Always apply straight conrners to arrows and similar objects.

Composition​

  • All icons of the same size aim for the same level of complexity.
  • Small icon variants may have less detail than medium-sized variants.
  • All icons aim for the same relative size so that no individual icon stands out from the rest of the set.
  • Common shapes are placed and sized according to the key shapes guides in the Illustrator and Sketch files.
Smaller icon variants may have less details than larger variants
Icons are drawn on a grid with key shapes (circle, square, portait and landscape rectagles)

Character​

  • Atlas Icons are rather neutral and geometric than cute and organic.
  • They are minimalistic and use just enough detail to be recognizeable.
Atlas Icons are neutral and geometric
Don’t create icons that look cute or organic

From Illustrator to Sketch​

To copy icons from Illustrator to the Ui Icons.sketch file, please follow this checklist:

  1. Illustrator: select all objects on the artboard, including the positioning aid layer box and copy to clipboard 1
  2. Sketch: duplicate an icon artboard on the symbols page, rename it accordingly and paste your drawing
  3. Sketch: make sure the positioning aid is correctly positioned at y:0, x:0 2
  4. Sketch: rename the positioning aid to bounding-box (spelled exactly like this), move it to the very bottom of the symbol’s layer list and set it to no fill, no borders
  5. Sketch: flatten all groups, maybe rename all layers to “path” 3
  6. Sketch: set the default line (or fill) color to neutral-80
  7. Sketch: make sure the symbol’s export settings are correct (no size, no prefix, format: SVG, artboard background color not included in export)

From Illustrator to Sketch

Handover to Development​

You need to export the icons from Sketch and add them via a pull request to the Atlas repository. For more detailed instructions, please see the icons readme file.