Ladbrokes Iconography
Custom icon system with Apple SF Symbols quality
We created over 140 custom icons for Ladbrokes' native apps and website. Each icon works in 9 different weights, supports custom colors and gradients, and can be animated. Built to Apple SF Symbols standards.
The Challenge
Ladbrokes needed icons that felt native to iOS while working across Android and web. Not generic symbols. Not inconsistent downloads from icon libraries. Professional, cohesive icons matching Apple's SF Symbols quality.
The icons had to work in multiple weights for different UI contexts. Light weight for large displays. Bold weight for emphasis. Everything in between for flexibility. They needed to support custom colors, gradients, and animations. All while maintaining the Ladbrokes brand.
And they needed two delivery formats. Native format for Xcode integration on iOS. Optimized SVG for Android and web. Over 140 icons spanning sports betting, racing, navigation, and status indicators. Each one designed to Apple's Human Interface Guidelines.
The Solution
We followed Apple's SF Symbols design methodology. Every icon designed in 9 weights: ultralight, thin, light, regular, medium, semibold, bold, heavy, black. The same flexibility designers get from Apple's system icons.
Each weight is optically adjusted. Not just scaled stroke widths. Proper optical tuning so icons look right at any size and weight. Corner radii, proportions, negative space all balanced for each weight.
The icons support custom colors and gradients. They're built for animation. Bounce, pulse, fill, state changes. The architecture handles it.
We delivered in two formats. Native format for seamless Xcode integration. Optimized SVG for web and Kotlin. Sports betting icons, racing symbols, UI navigation, status indicators. Over 140 icons covering everything Ladbrokes needed.
This was a 2-3 month collaboration with weekly design reviews. We worked directly with Ladbrokes' internal design team and supported their developers through Xcode integration.
How It Works
Building an icon system that works like Apple's SF Symbols required technical precision and deep platform understanding.
The 9-Weight System
Most custom icon sets give you one weight. Maybe two if you're lucky. We built all nine: ultralight through black.
Why? Because designers and developers need flexibility. Ultralight for large marketing headlines. Regular for standard UI. Bold for selected states. Heavy for accessibility. The right weight for every context.
Each weight is optically adjusted, not just mathematically scaled. We tuned corner radii, stroke relationships, and negative space for each weight. The icons look right at 16px and 64px. In nav bars and hero sections.
Following Apple's Standards
Apple's SF Symbols set the bar for icon quality on iOS. We matched that standard.
Every icon follows the Human Interface Guidelines. Consistent construction. Unified grid system. Proper alignment and spacing. The icons feel native because they're built to the same principles Apple uses.
This matters for user experience. Icons that follow platform conventions feel familiar. Users recognize patterns faster. Interfaces feel cohesive.
Built for Motion
Static icons are just the starting point. These icons are designed for animation.
The architecture supports common animations: bounce, pulse, scale, fill, rotate. State changes work smoothly because anchor points are consistent across weights. Empty to filled. Inactive to active. The transitions feel natural.
Ladbrokes can add subtle motion to reinforce interactions. Favorites that bounce when selected. Notifications that pulse for attention. Loading states that communicate progress. The icons handle it.
Dual-Platform Delivery
iOS and web need different formats. We delivered both.
For iOS, native format that integrates directly into Xcode asset catalogs. Full support for SF Symbols features: all 9 weights, custom colors, animations. Developers import and use them like system icons.
For web and Android, optimized SVG. Clean paths, minimal file size, proper viewBox attributes. Compatible with Android's vector drawable system. Fast loading for web.
Same design. Different optimization for each platform.
Kind Words
“Having worked with Halftone Digital for 2+ years, I can confidently endorse their output across over 5 projects. Rob and Sasha are the equivalent of multiple roles in a traditional business, in just 2 people. They can work up and down the web value chain – research, design, creative, delivery, etc. – and I have seen multiple times where they have been able to adapt/expand their skills successfully to the problem statement and work required. I've also been impressed with their ability to effectively work with many different stakeholders and teams in varying set ups – smaller to bigger teams, some more technical and others not at all. They are great partners and produce high quality work – would highly recommend.”
“Working with your team has been an absolute pleasure. Communication has been clear and consistent, deadlines have been met with ease, and the quality of work consistently exceeds expectations. It truly feels like a collaborative partnership where ideas are valued and execution is seamless. What stood out most was your clear focus on user-centered design. Every decision felt rooted in a deep understanding of user needs, resulting in clean, intuitive, and highly functional designs & icons.”
