Variable Icons

About this plugin

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

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

Benefits

1. Centralized icon styling with variables and modes.
2. Optimized icon components for instance swaps.
3. Tailored for Lucide Icons.

Video Tutorial

Watch a quick demo to see the plugin in action.

Features

1. Assigns variables to:
2. Width and height of selected frames
3. Stroke weight of the shapes of selected frames
4. Stroke color of the shapes of selected frames
5. Sets selected frames to auto-layout mode
6. Positions the shapes of selected frames in absolute mode
7. Converts selected frames into components
8. Saves assigned variables as preferences within the plugin

Limitations

1. Local 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.
2. Stroke Icons Only: Filled-style icons are not supported for stroke weight and stroke color variable assignments.
3. Flattened Shapes Only: Icons containing ovals, rectangles, text, or groups will not have variables assigned.

Feedback

I’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!

1. Share your thoughts below
2. Or email me: domas dot markevicius at me dot com