I work on several themes to support the many brands within my company. One of the ways that brands can differentiate themselves and showcase brand personality is by using custom arrows for navigational buttons (Back/Next) and within Carousel & Pagination elements. As I’m building a theme and filling in the hex values per brand for the semantic tokens, I want to be able to assign a custom arrow for these controls at the same time using variables. While everything else that I need to build a theme can be handled with variables, without icon support, I’m not able to build one file that includes all themes. Instead I have to build one UI kit per theme.
Additionally, some of my teams use different design systems based on the product they work on, whether it’s web, app, or enterprise. With icon support in variables, I could preload their preferred icon styles (flat, outline, filled, etc.) to their components without them having to make the selections manually every time.