Icon Design UK

Why custom icons are worth it

Free icon packs are fine until you need an icon that isn't in the pack, or you combine two packs and the difference shows. Icons from different sources use different stroke weights, corner styles and proportions, and readers notice even when they can't say why. A custom set solves both problems: every icon matches, and each one shows your actual service or feature instead of the nearest generic symbol.

We design icons for website service sections, app and software interfaces, feature lists, infographics, presentation templates, wayfinding signs and packaging. If you already use an open-source set, we can also draw extra icons to match it.

Icons are small, but they're repeated everywhere, so small inconsistencies multiply. A set designed once, with clear rules, also makes it cheaper to add icons later, because each new one follows the same grid rather than being invented from scratch.

Grids, strokes and optical balance

Consistency comes from rules. For interface icons we normally work on a 24 x 24 px grid with a 20 x 20 px live area and 2 px of padding, the same structure Google's Material Design system icon guidelines describe. Keyline shapes for circles, squares and rectangles make sure a round icon and a square icon look the same size, even though the square has to be drawn slightly smaller to balance optically.

• Stroke weight: one weight across the set, commonly 1.5 or 2 px at 24 px.
• Corners and ends: one corner radius and one line-end style.
• Pixel alignment: straight lines sit on whole pixels so they stay sharp at small sizes.
• Size variants: icons that will appear at 16 px often need a simplified version, because detail that works at 48 px turns to mush at 16.

SVG for the web, done properly

For websites and apps we supply icons as SVG, which stays sharp at any size and on any screen density. We clean each file before handover: outlines merged, stray points removed, unnecessary editor metadata stripped and the viewBox set consistently, so files are small and behave predictably. Where your developer wants it, icons use currentColor so their colour follows the surrounding text and can be changed in CSS, including for dark mode.

We can supply individual SVG files, a single SVG sprite, or PNG fallbacks at 1x and 2x. For accessibility, we note which icons are decorative and which need a text label, since an icon on its own isn't always understood.

Favicons and app icons

A favicon shows at 16 or 32 px in a browser tab, so a full logo with a strapline will never read. We design a simplified mark, usually a symbol or initial from your logo, and supply the files browsers and phones look for: a favicon.ico, a scalable SVG favicon, a 180 x 180 px Apple touch icon, and 192 and 512 px PNGs for a web app manifest.

For mobile apps, Apple's App Store requires a 1024 x 1024 px icon, and Google Play asks for 512 x 512 px as a 32-bit PNG under 1024 KB, according to Google's Android developer documentation. We design app icons to read clearly at small sizes and within each platform's mask shape.

Price and handover

Icon design is charged at £45 an hour + VAT. We quote a fixed price for the set based on the number of icons, how detailed they are and how many sizes and formats you need. You receive SVG, PNG, EPS and PDF files, organised and named, plus a one-page guide so future icons match. Icons for websites often go hand in hand with website graphics, and icon styles can be added to your brand guidelines. Ask for a quote.

What you get

• A named, consistent icon set for your services, features or interface
• Optimised SVG files, plus an SVG sprite if your developer wants one
• PNG exports at the sizes you need, including 2x versions
• EPS and PDF files for print and signage
• Favicon, Apple touch icon and web app manifest icons
• A short icon guide: grid, stroke, sizing and how to request new icons

How it works and what it costs

Logos from £150, brochures from £295, photography from £295 a half day and CAD at £45 an hour, all + VAT. You get a fixed price before we start.

1. Tell us the brief

   What it is for, who will see it, where it will be used and any examples you like. Rough is fine.

2. Fixed price

   We confirm the price and what you get, in writing, before any work starts.

3. First designs

   We design, shoot or model it and share the first version for your comments.

4. Refine

   We make the changes, check every detail, and prepare the files properly for print, web or manufacture.

5. Final files

   You get the finished files in the formats you need, ready for your printer, website, social channels or manufacturer.

Related