When we decided to modernize dotCMS, our goal wasn’t just to refresh our interface, but also to create a more consistent and modern experience for our users. As my colleague recently discussed in A UX-Driven Approach to Modernizing dotCMS, UX plays a huge role in every part of the product. Today, I want to dive into one small, but surprisingly complex, aspect of that modernization: our icons.
dotCMS chose Material Icons years ago, and the goal was simple: rely on a trusted, well-maintained icon library rather than building an entire icon system in-house. As a small UX team, outsourcing icons made sense. Material Icons offered thousands of options, consistent naming, and a fast way to scale without carrying the weight of icon development ourselves.
The Challenge with Icons
Our icons aren’t just decorative. They appear everywhere: content types, navigation panels, buttons, input fields, tables, and more. Users can select icons for their content types, giving them the flexibility to personalize their experience.
Over time, the limitations of our original decision became clear. The Material Icons set aged, and its filled, sharp-edged look made the interface feel crowded and drew too much attention to the icons themselves, instead of letting them quietly help the user.
When we started our new UX redesign, we realized we were tied to a dependency that no longer matched our design system. And because clients actively use these icons, we couldn’t simply replace the library without breaking their implementations.
Building a full icon library internally, one that matched our new design language and offered the 2,000+ options our users relied on, wasn’t realistic for a small team.
The Turning Point
While exploring alternatives, I discovered that Material Icons had evolved too. Google introduced Material Symbols, an updated icon system that offers both a new visual style and a new level of flexibility.
Instead of static icons, Material Symbols are SVG symbols with modifiable properties, meaning you can fine-tune their appearance through simple CSS or font-variation settings. This opened the door to customization that previously wasn’t possible without creating new icons from scratch.
What Material Symbols Allow You to Adjust
Material Symbols include several properties that dynamically alter the appearance of each icon:
Weight: controls stroke thickness
Grade: subtly adjusts thickness without affecting the icon’s overall size
Optical Size: adapts the icon for different UI contexts
Fill: switches between outlined and filled styles
Styles: choose between Outlined, Rounded, or Sharp
By adjusting these properties, we were able to give the library a look and feel that aligned with the new dotCMS design:
Outlined instead of filled
A lighter stroke weight (we selected 300, reduced from the previous 500)
Rounded, softer shapes
Overall lighter visual presence
A cleaner appearance that matches our updated interface
This allowed us to modernize the entire platform without breaking user-selected icons and without having to build a giant icon library on our own.
Why This Matters for Small Teams
For small teams, outsourcing something like icon development isn’t just practical; it’s often the only sustainable choice. But dependencies come with trade-offs. When the provider stops evolving, the dependency becomes a limitation.
That’s why the choice of partner matters.
Google’s evolution from Material Icons to Material Symbols showed a clear understanding of their users’ long-term needs. Their approach allowed us to update and modernize our platform while maintaining full backwards compatibility for clients who rely on the existing library.
Conclusion
While our icon modernization journey may look like a simple question of aesthetics, the full story involves understanding the long-term implications of design decisions, recognizing the limits of what a small team can build, and choosing sources whose tools evolve alongside your product.
This change allowed us to modernize dotCMS in a way that is efficient, consistent, and safe for existing implementations. It’s a reminder that strategic dependencies, when chosen wisely, can grow with you rather than hold you back.