Skip to content

Add :mini and :micro variants for Heroicons#40

Open
bslobodin wants to merge 2 commits intoAliOsm:mainfrom
bslobodin:hero-mini-micro-variants
Open

Add :mini and :micro variants for Heroicons#40
bslobodin wants to merge 2 commits intoAliOsm:mainfrom
bslobodin:hero-mini-micro-variants

Conversation

@bslobodin
Copy link

Summary

Adds the two missing Heroicon variants — :mini (20x20, solid fill) and :micro (16x16, solid fill) — to complement the existing :solid and :outline variants.

Closes #39

Details

The Heroicons library ships 4 variants, but only 2 were supported:

Variant Size Style Status
outline 24x24 1.5px stroke Existing
solid 24x24 Solid fill Existing
mini 20x20 Solid fill New
micro 16x16 Solid fill New

8 icons that don't have a micro variant upstream (arrow-left-on-rectangle, arrow-right-on-rectangle, arrow-small-{down,left,right,up}, minus-small, plus-small) correctly skip the :micro method and wrapper class.

Usage

# Using variant parameter
render PhlexIcons::Hero::Home.new(variant: :mini)
render PhlexIcons::Hero::Home.new(variant: :micro)

# Using variant-specific classes
render PhlexIcons::Hero::HomeMini.new
render PhlexIcons::Hero::HomeMicro.new

Changes

Split into two commits for easier review:

  1. Code changes — Updated the generator to dynamically handle all 4 variants and updated the VARIANTS constant
  2. Generated icons — Re-generated the Hero icon pack (640 new files, 325 modified)

Update the Hero icon generator to produce all 4 Heroicon variants:
- solid (24x24, filled)
- outline (24x24, 1.5px stroke)
- mini (20x20, filled)
- micro (16x16, filled)

The generator now dynamically determines available variants per icon,
since 8 icons lack a micro variant in the upstream heroicons source.

Refs: AliOsm#39
Generated 324 mini (20x20) and 316 micro (16x16) variant components.
8 icons lack a micro variant upstream: arrow-left-on-rectangle,
arrow-right-on-rectangle, arrow-small-{down,left,right,up},
minus-small, and plus-small.

Total hero icon files: 1,614 (up from 974).
@AliOsm
Copy link
Owner

AliOsm commented Feb 17, 2026

Hello @bslobodin and thanks for your PR. I didn't add these when I implemented the gem as I thought these are a simple size change could be done using CSS. Is this correct or these have a special property?

@bslobodin
Copy link
Author

👋 @AliOsm these are actually not just size variants you can replicate with CSS, I am certain they redrew every icon from scratch for each size.

A nice concrete example is ExclamationTriangle — the little warning dot at the bottom has a radius of 0.75 in the 24px solid, but mini and micro draw it with radius 1 to keep it visible at smaller sizes. Each variant has a different viewBox and completely redrawn paths, so they're genuinely separate icons rather than scaled copies.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add :mini, :micro variants for Heroicons

2 participants