Icon Variant Composer

Preview

Real sizes, light and dark

Your set

Example

Export

About the exported file
  • Lines stay as real lines, not shapes. Change the one stroke-width on the <svg> tag, or the stroke in Figma, and the whole icon follows.
  • The colour is currentColor, so the icon takes the text colour around it. The gap around the badge stays see-through on any background.
  • Inside and Outside line positions are saved the way Figma saves them: a doubled line inside a clip or mask. Those parts keep their own thickness, so change it here and copy again.
  • The ring badge fits the thickness set here. If you change the thickness a lot later, copy again from this page for the best fit.