AnySVG – Custom icon widget for elementor

By arhamashfaq

Description

Tired of being limited to pre-bundled icon libraries in Elementor? AnySVG lets you use any SVG icon on the web!

Simply paste your raw SVG code directly into the widget, and style it with all the familiar controls of Elementor’s native Icon widget.

Paste Raw SVG: Paste clean SVG code from Heroicons, Bootstrap Icons, FontAwesome, or your own design tools.
Auto-Cleaning and Scale Prep: Automatically strips inline width, height, and style attributes so the Elementor size settings can scale the icon beautifully.
Auto viewBox Synthesis: If your SVG is missing a viewBox but has width and height, AnySVG automatically adds it so it never crops.
Advanced Color Overrides: Select from four color mapping modes: Keep Original (for colored logos), Force Fill, Force Stroke, or Force Both.
Familiar Elementor Controls: Customize View (Default, Stacked, Framed), Shape (Circle, Square), Link URL, Size, Spacing/Padding, Border Width, Border Radius, Rotation, and Alignments.
Normal & Hover States: Configure primary/secondary colors and hover transitions.
Backbone Live Preview: Instant updates inside the Elementor editor screen.

Upload the plugin folder anysvg to the /wp-content/plugins/ directory, or upload the ZIP file via the WordPress plugin uploader.
Activate the plugin through the ‘Plugins’ menu in WordPress.
Open any page in Elementor editor, drag the “AnySVG Icon” widget into your layout, and start designing.

Can I use multi-colored SVGs?: Yes! Set the Color Override Mode to Keep Original Colors to preserve the custom gradients or colors of your logo or graphic.
How do I resize the SVG?: Use the Size slider under the Style tab. The plugin automatically cleans up hardcoded SVG widths/heights so Elementor’s sizing overrides them correctly.

There are no reviews for this plugin.

“AnySVG – Custom icon widget for elementor” is open source software. The following people have contributed to this plugin.

No reviews have been submitted yet.