Allow global icon sizing configuration for components (avoid hardcoded 16x16 size)

[artdive]

Description

Currently, many HeroUI components seem to have their internal icon sizes hardcoded or strongly tied to a 16x16 (e.g., size-4) grid layout. While this works perfectly for icon packs like Gravity Icons, it creates a lot of friction when using other popular icon sets.

For example, packs like Nucleo UI use an 18x18 grid for standard icons and 12x12 for smaller variants. To make them look right in HeroUI components, we have to manually override sizes everywhere by explicitly applying utility classes like size-* on every single icon instance.

Proposed Solution

Instead of hardcoding specific Tailwind sizing utilities directly onto the slots, it would be awesome to introduce a way to globally configure or dynamically adjust default icon sizes.

Alternatively, components could apply a dedicated semantic class (e.g., hui-icon-md, hui-icon-sm) or rely on CSS variables, allowing us to easily override the default 16x16 baseline to something like 18x18 globally across the entire application theme.

Benefits

• Better Flexibility: Seamless integration with any third-party icon library (Lucide, Nucleo, FontAwesome, etc.).
• Cleaner Code: No need to clutter the markup with repetitive className="size-[18px]" overrides on every component.