Bruhs home Icons

Icons

Use Heroicons at their native sizes. Match each icon's viewBox to its size class.

Sizing

  • Micro (16px)

    Use size-4 in app interfaces and beside text-body-sm.

  • Mini (20px)

    Use size-5 for navigation and marketing pages.

  • Outline (24px)

    Use size-6 for hero illustrations and feature rows.

Rules

Choose the icon set that matches the required size. Keep its native dimensions.

Place icons directly in the layout. Skip decorative boxes and circles behind them.

Use fill-* for filled icons and stroke-* for outlines.

Add shrink-0 inside flex containers. Use h-lh to align with adjacent text.

Use btn-icon for buttons that show only an icon. It adds a 48px touch target.