Atom Tools

Class autocomplete for Webflow component properties, plus local SVG cleanup, safe previews and accessibility tools.

Atom Tools helps Webflow designers manage component classes and prepare SVG icons — all in one Chrome extension. Open the tools panel to choose SVG Optimizer. Class Helper works automatically inside Webflow Designer. SVG Optimizer: • Clean and sanitize pasted SVG code locally. • Preview optimized icons before copying. • Remove fixed dimensions while preserving the viewBox. • Choose decorative or meaningful accessibility. • Optionally convert solid icon colors to currentColor. • Keep original colors by default. • Copy the result into a Webflow Code Embed or Atom Icon Code Prop. SVG Optimizer requires no Atom account or Webflow project. Complex artwork may retain its original colors and display warnings to help protect its appearance. Class Helper: • Search classes from your project’s loaded CSS. • Add and remove selected classes using tags. • Navigate suggestions with your keyboard. • Works with any Webflow framework. • Adapts to Webflow’s light and dark themes. Class Helper adds autocomplete to component text properties whose names begin with “Class” or “Classes”. Start typing to find matching classes, select a suggestion to add one, and click × to remove it. Class values remain ordinary text in Webflow. Suggestions are based on loaded project CSS, so some unused classes may not appear. The tools panel supports light and dark themes and preserves unfinished SVG work while switching tools within the current panel session. SVG processing happens locally in your browser; pasted SVG code is not uploaded. An independent tool by Atom Agency. Not affiliated with or endorsed by Webflow.