Back to Plugins
Variable Icons

Variable Icons

An easy way to convert SVG icons to components with variables.

librarydesignsvg iconsvariablesiconsdesign systemcomponents

Plugin Preview

Variable Icons preview

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.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

Plugin Details

Version1
CreatedNovember 26, 2024
Last UpdatedDecember 10, 2024
CategoryFile organization plugins
CreatorDomas Markevičius
Stats44 installs, 9 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://domasmark.us
    • https://fonts.googleapis.com/
    • https://fonts.gstatic.com