The rules come first
Before drawing the full set, we agree a handful of rules: the grid size (often 24 pixels), the stroke weight, how corners are rounded, how much padding sits inside the frame, and whether icons are outline, filled or two-tone. These rules are why a set looks consistent. They also let your team or a future designer add icons without guessing.
- Home
- Search
- Cart
- Heart
- Calendar
- Location
- Camera
- Chat
- Bell
- Lock
- Leaf
- Cloud
- Cup
- Bolt
- Profile
Try the weight toggle above. A thin stroke looks refined on large marketing pages but can disappear at 16 pixels; a bold stroke reads well small but feels heavy in a large layout. Many teams use one weight for the interface and another for marketing.
Sizes and testing
We test each icon at the smallest size you use, usually 16 or 20 pixels, on light and dark backgrounds. Details that blur at small sizes get simplified, and shapes that look too similar get pulled apart so a user can tell "archive" from "download" at a glance.
Files you get
| Format | Use |
|---|---|
| Optimized SVG | Web and app code |
| PNG at set sizes | Slides, documents and tools that don't take SVG |
| Figma components | Your design files, with names your team can search |
| Icon font (on request) | Older codebases that use one |
Questions
How many icons should a first set have?
Enough for the screens you are building now, plus the common ones you know are coming. Twenty to forty is a usual start; the rules make adding more later straightforward.
Can icons be animated?
We can prepare SVGs with separate layers for simple animations. The animation itself is set up by your developer or a motion designer.
Need a set, not a single drawing? Tell us where the assets will be used, how many you need and the look you already have.
Request a quote