Variable Icons

Convert selected SVG icons into components while assigning variables for streamlined design control.

Currently, the plugin supports only line icons using stroke color.

BenefitsCentralized icon styling with variables and modes.

Optimized icon components for instance swaps.

Tailored for Lucide Icons.

Video TutorialWatch a quick demo to see the plugin in action.

FeaturesAssigns variables to:

Width and height of selected framesStroke weight of the shapes of selected framesStroke color of the shapes of selected framesSets selected frames to auto-layout modePositions the shapes of selected frames in absolute modeConverts selected frames into componentsSaves assigned variables as preferences within the pluginLimitationsLocal Variables Only: The plugin supports only local variables. Shared library assets are not recognized, but local variables with alias values from remote libraries will work.

Stroke Icons Only: Filled-style icons are not supported for stroke weight and stroke color variable assignments.

Flattened Shapes Only: Icons containing ovals, rectangles, text, or groups will not have variables assigned.

FeedbackI’m a solo designer who learned coding with AI tools. This plugin has proved useful in my workflow, but I’m eager to hear how it fits into yours.

Comments and suggestions are welcome!

Share your thoughts belowOr email me: domas dot markevicius at me dot com