How to design outline icons with uniform stroke width

Outline icon sets look deceptively simple. A clean, minimal line drawing of a camera, a shopping bag or a coffee cup, with every curve the same thickness, carries a polished feel that defines modern app and web design. Achieving that visual harmony depends on a few technical habits, from grid planning to export settings, and on the patient eye that catches when one stroke is a pixel thicker than the rest.

Australian designers working across Sydney, Melbourne and Brisbane studios often need icon families that scale from a tiny mobile tab bar to a hero illustration on a presentation slide. Local agencies billing in Australian dollars tend to favour reusable, well-organised kits, because clients expect assets to drop straight into Figma or Photoshop without cleanup. This guide walks through the process of producing a consistent set of outline icons with a single, even stroke width, ready for websites, slide decks or product interfaces.

Sketching the icon family on a consistent grid

Every reliable outline icon set begins with a square canvas, usually 64×64 or 128×128 pixels, with a keyline grid drawn through the middle. Sketching first on paper, or in a low-pressure digital layer, lets you decide the silhouette of each symbol before the stroke locks everything into shape. At a Melbourne co-working space you might see designers taping a printed grid to the wall and drawing quick thumbnails in black marker, then photographing the sheet for reference later.

Keep the key shapes aligned to a shared optical centre rather than the mathematical centre. Round forms, like a magnifying glass, often look balanced when their geometric centre sits one or two pixels above the geometric middle of the canvas. For square forms, like a calendar or a document, the centre coincides with the grid intersection. Building the family on this shared logic means every glyph feels related even when the subject matter jumps from a USB stick to a paper plane.

Setting up Photoshop for precise vector work

Open a new document, switch to the Shape tool, and disable anti-aliasing preferences that soften hard vector edges in preview only. Set units to pixels and zoom to 200% or 400% so that one-pixel variations become obvious. Australian studios commonly work at 100% zoom for moodboards and switch to high zoom only when polishing assets, so training your eye to read the pixel grid at full size is a worthwhile habit.

Set up a custom shape library dedicated to the project, then create a baseline rectangle that marks the safe area inside the canvas. A common rule is to keep all artwork within an inner 48×48 zone when the canvas is 64×64, leaving an 8-pixel margin on every side. This breathing room prevents icons from feeling cramped when they sit next to bold typography on a Sydney-made startup landing page.

Locking down the stroke width before you draw

Pick a single stroke value early, and stick to it. Common choices are 1.5 px, 2 px or 2.5 px on a 64-pixel canvas. Anything thinner disappears on high-density mobile screens, anything thicker starts to look chunky next to light UI text. In a Brisbane fintech project you might choose 2 px to match the slightly heavier weight of the surrounding type, while a travel blog might prefer a finer 1.5 px line.

Apply this stroke through a layer style or by selecting Stroke in the path operations panel so that every new shape inherits the same width automatically. Resist the urge to nudge a single icon's stroke up or down because one curve looks too thin; the consistency across the set matters more than the perfection of any single glyph. Designers at agencies like Brisbane's Big Chapter or Melbourne's Frank Digital often hand the set to a second designer for a quick audit, since a fresh pair of eyes spots stray stroke widths faster than the maker.

Building shapes with path tools and pen precision

Draw each shape using the Pen tool with as few anchor points as possible. Outline icons gain elegance from economy, so a coffee cup might be drawn with four to six points instead of twelve. Curves should rely on smooth Bezier handles, and straight segments should lock to whole-pixel coordinates when possible. This pixel-snap habit is second nature to designers who have shipped pixel-perfect dashboards for Airtable-style tools, and it pays off in crisp renderings on every screen.

Use the Path Operations panel to subtract inner cutouts, like the hole in a padlock shackle, or to combine overlapping shapes into a single compound path. Boolean operations keep the stroke unified across what would otherwise be separate elements, which is essential when the icon needs to feel like one drawing rather than a stack of parts. Working on a clean layer group, named after the icon's subject, makes the final PSD tidy for handoff to developers who will read the file structure.

Fine-tuning corners, caps and inner details

Once every shape is drawn, audit the corners. Outline icons typically use rounded line caps and joins, set to a radius of half the stroke width or slightly less. A 2 px line with a 1 px corner radius feels friendly and modern, the kind of look favoured by Sydney SaaS dashboards and Australian e-commerce brands like The Iconic's product pages. Square caps and joins read as technical or industrial, which suits infrastructure or engineering themes but not consumer interfaces.

Inspect each glyph for optical illusions. Two parallel lines that are mathematically the same distance apart can look uneven when one curves slightly differently, so a manual nudge might be needed. Check inner details, like the dot of an "i" icon or the needle on a compass, at multiple sizes by exporting quick PNG previews and viewing them at 16, 24 and 32 pixels. Australian designers often test their icons against real copy in a Figma frame with locally used fonts such as those served by design libraries popular with Aussie studios.

Exporting PNGs and organising the final delivery

For transparent PNGs, use File > Export > Export As, choose PNG, set the canvas size to match the source artwork (without the keyline grid) and tick transparency. Most icon kits ship in a range of sizes, commonly 24, 48, 64 and 128 pixels, with the source PSD retained at full resolution for future edits. For Australian clients working in AUD, packaging the sizes into clearly labelled folders saves billable hours during onboarding and avoids back-and-forth emails.

Save the PSD with named layers, a separate folder for each icon, and a master Stroke layer style that the team can swap if the brand updates its visual weight. Keeping a small README inside the PSD explains the stroke width, the canvas size and the recommended export sizes, so any designer who opens the file months later can keep producing matching icons. With these habits in place, the resulting set will feel cohesive across an entire product, from a single button to a full marketing site.

Browse the PSD Icons catalogue to find a base set you can customise, or grab a free starter pack to practise these techniques on. Premium packs include expanded variants and pre-built layer styles so you can dive straight into the polishing stage.