What is the best way to replicate Fan Velocity Buttons without a Fan Entity?

I have a Fan component that has 11 velocities, where 5 of them mean special modes.

I am trying to find a ways to get something like this:

But for 11 options where I could edit each button icon/color if needed.

What would be the best way to do it? I am kind of lost, until now, I never created custom UI components.

Thank you!

Why not use a template fan component to organize what those buttons do in modalities that the fan can have? You can then hide the original fan you base your template on, so it’s not bothering you on the interface.

How is integrated? No way to answer really without knowing how it is controlled.

For one of mine, used IR with broadlink so it’s only what to remote buttons do.

One suggestion for GUI if the integration takes a number would be using number entity. A number helper has these (min/max/step), looks like this raw:

image

Or a prettier mushroom:

image

If you can do it with templates/code, you can look at this HACS integration: Nerwyn/service-call-tile-feature: Home Assistant custom features for tile cards and more. Call any action using buttons, dropdowns, selectors, sliders, and spinboxes. It allows you to create custom features for a card and you can display them like buttons just like you have for the fan integration, but you can make the buttons do way more.