The Approach

1. Discovery & Design Principles

Conducted stakeholder interviews and internal kickoffs to finalize 5 core design principles (Exciting, Competitive, Sporty, Simple, Trust) out of broader business objectives. This gave all teams (Design, Product, and Tech) a shared language to align on before a single icon changed. This step mattered more than it might look. In a fast-moving org with multiple squads shipping in parallel, a shared principle set is the only thing that prevents a system from drifting the moment you hand it over.

2. The System Rules

Every visual decision in the Dream11 icon set follows a documented rule. What follows is the system behind the icons — the constraints that made consistency possible at scale.

→ Grid & Keylines

→ Stroke weights & optical corrections

→ Fill vs. outlined states (and when)

→ Naming & token architecture

→ Corner radius decisions

2A. Grid & Keylines

Icons are built on a 24pt base grid. The live area of an icon is the region where its main visual elements reside. This area should be impactful and well-balanced to ensure the icon is clear and recognisable, even at smaller sizes. Padding refers to the space around the icon's elements. The 2pt padding zone on each side isn’t decorative; it ensures icons don't appear cramped inside UI components with tight backgrounds, and that they scale predictably across sizes.

Keyline shapes — circle, square, portrait rectangle, landscape rectangle — act as optical anchors. A cricket ball icon is built to the circle keyline. A scoreboard icon is built to the landscape rectangle. Both feel the same visual weight in a navigation row, because they're calibrated to the same reference geometry — not the same bounding box dimension.

2B. Stroke weights & optical corrections

Dream11's icon set uses a 24px base grid with a 1.5px centre stroke weight. We explored multiple stroke sizes and finally arrived at 1.5px. This stroke weight was scalable across the product's data-heavy screens without overwhelming the information density around it. Icon sizes scale across 12px, 16px, 20px, 24px, 32px, and 40px within the UI. Mathematically scaling a 24px icon to 16px produces strokes that are too heavy for the smaller context. The correction is small — 0.5pt — but the difference in a dense list row is visible and meaningful.

Stroke weight scales with them — but not mechanically. Each size gets an optically corrected weight to preserve legibility:

2C. Fill vs. outlined states

The product's screens are data-heavy. Bold outline icons at small sizes compete with the information they're meant to support — so the baseline was 1.5px stroke-weight outline icons. We needed to ensure that the icons are scalable & legible across the product.

Interactive states used brand colour outline icons. Fill icons were reserved for special product features or high-emphasis moments — but even here, colour wasn't a free variable. The Dream11 design system had pre-assigned colours to specific tasks and categories. Each colour already carried meaning. Introducing new icon colours arbitrarily would have created confusion in the UI hierarchy.

So the rule became simple: icons are black or brand colour by default. Feature-specific icons get colour case-by-case — line or filled — always within the defined palette. The system is quiet when it needs to be, expressive when the moment earns it.

2D. Naming & token architecture

Because this was a live production app, the new icon design system had to strictly follow our existing naming conventions and token structure. This ensured a smooth, error-free migration for current assets and established a consistent, maintainable format for all future icons.

2E. Corner radius decisions

1.5px for standard paths, 3px for larger forms — these were the two corner-radius values fixed for the Dream11 icon set. The previous icons had sharp ends. They read as dated — technically functional, but carrying none of the energy the brand was moving toward. Rounded corners and rounded edges shifted the feel: modern, confident, approachable. Still sporty. Still precise. But no longer cold.

During benchmarking, we found that the majority of category-leading brands had moved to this rounded style — and the emotional register it carried mapped directly to the Trust and Sporty principles we were designing toward. The decision wasn't aesthetic preference; it was brand alignment with visual evidence behind it.