Icon Design Illustration

Custom iOS icon system, 37 icons in dark & light

Designed a cohesive set of 37 custom iOS icons with full dark and light variants, each built on the same grid and stroke rules.

TypePersonal / iOS
RoleIcon Designer
Year2020
ScopeIcon Design, Dark & Light Variants, Widget Elements
37
Custom icons across dark and light themes
2
Full theme variants: dark and light, both complete
3
Deliverable types: icons, widgets, and home screen layout
Custom iOS icon system
The Spark

When what exists isn't enough

When Apple introduced iOS 14's home screen customization, it opened a door I immediately wanted to walk through. The ability to replace app icons with custom designs meant a fully curated, visually consistent home screen was finally possible.

The problem: I had a specific aesthetic in mind: clean, minimal line art with a consistent stroke weight and a refined sensibility. After searching through icon packs and marketplaces, nothing matched. The existing options were too illustrative, too bold, or inconsistent in their visual language.

So I designed my own. Not as a workaround, but as a design challenge: could I build a complete, cohesive icon system from scratch that would work seamlessly across both dark and light home screen contexts?

"If the tool doesn't exist, build it. Every icon set here started because the right one wasn't available."

Every icon follows the same set of rules: a consistent stroke weight of 1.5pt, rounded line caps, no fills, and a fixed 24×24 artboard with uniform padding. These constraints are what create the cohesion: when every icon plays by the same rules, the set feels like a system, not a collection.

The dark version uses a deep navy background with soft white strokes. The light version inverts to a near-white surface with the same dark ink. Both were designed simultaneously, not as afterthoughts of each other, so neither compromises for the other.

Widget elements followed the same language but adapted for larger canvas sizes: more whitespace, slightly heavier optical weight to hold their own at larger display sizes.

Design System

Rules that create cohesion

Dark Version
Line art on deep navy
Custom iOS icon set, dark variant, screen 1 of 19
Custom iOS icon set, dark variant, screen 2 of 19
Custom iOS icon set, dark variant, screen 3 of 19
Custom iOS icon set, dark variant, screen 4 of 19
Custom iOS icon set, dark variant, screen 5 of 19
Custom iOS icon set, dark variant, screen 6 of 19
Custom iOS icon set, dark variant, screen 7 of 19
Custom iOS icon set, dark variant, screen 8 of 19
Custom iOS icon set, dark variant, screen 9 of 19
Custom iOS icon set, dark variant, screen 10 of 19
Custom iOS icon set, dark variant, screen 11 of 19
Custom iOS icon set, dark variant, screen 12 of 19
Custom iOS icon set, dark variant, screen 13 of 19
Custom iOS icon set, dark variant, screen 14 of 19
Custom iOS icon set, dark variant, screen 15 of 19
Custom iOS icon set, dark variant, screen 16 of 19
Custom iOS icon set, dark variant, screen 17 of 19
Custom iOS icon set, dark variant, screen 18 of 19
Custom iOS icon set, dark variant, screen 19 of 19
19 custom icons, dark theme · 24×24px artboard, 1.5pt stroke, rounded caps
Light Version
Same system, opposite canvas
Custom iOS icon set, light variant, screen 1 of 18
Custom iOS icon set, light variant, screen 2 of 18
Custom iOS icon set, light variant, screen 3 of 18
Custom iOS icon set, light variant, screen 4 of 18
Custom iOS icon set, light variant, screen 5 of 18
Custom iOS icon set, light variant, screen 6 of 18
Custom iOS icon set, light variant, screen 7 of 18
Custom iOS icon set, light variant, screen 8 of 18
Custom iOS icon set, light variant, screen 9 of 18
Custom iOS icon set, light variant, screen 10 of 18
Custom iOS icon set, light variant, screen 11 of 18
Custom iOS icon set, light variant, screen 12 of 18
Custom iOS icon set, light variant, screen 13 of 18
Custom iOS icon set, light variant, screen 14 of 18
Custom iOS icon set, light variant, screen 15 of 18
Custom iOS icon set, light variant, screen 16 of 18
Custom iOS icon set, light variant, screen 17 of 18
Custom iOS icon set, light variant, screen 18 of 18
18 custom icons, light theme · same system, opposite canvas
Widget Elements

Scaled up for bigger moments

Widgets demanded a slightly different treatment: the same visual language, but with more room to breathe. I optically adjusted stroke weights to feel equivalent at 2×2 and 4×4 grid sizes. The result is a set of widget elements that sit harmoniously alongside the icon set without feeling like a different design system.

Turtle botanical widget illustration
Turtle
Flowers botanical widget illustration
Flowers
Monstera leaves botanical widget illustration
Monstera Leaves
Monstera leaves botanical widget illustration
Monstera Leaves (alt)
Butterfly botanical widget illustration
Butterfly
Hummingbird botanical widget illustration
Hummingbird
Takeaway

What this says about
how I work

System Thinking
I don't design individual pieces. I design rules that generate consistent pieces. The same thinking I apply to icon systems, I apply to design systems, component libraries, and brand guidelines.
Craft at a Granular Level
Optical weight adjustments, consistent stroke caps, precise alignment across 37 icons. The details most people skip are the ones I consider non-negotiable.
Designing for Context
Dark and light weren't two versions of the same file. Each was designed for its context from the start. The same principle guides every interface I design: what works in one context doesn't automatically work in another.
Self-Directed Ownership
No brief, no client, no deadline. I identified the gap, wrote the constraints, did the work, and shipped it. That's the same muscle that makes me effective when a team is moving fast and needs someone who doesn't wait to be told what to do.