Skip to content

How to Add Custom Animated SVG Icon in WordPress?

Updated On : August 24, 2026By : Reading Time : 1 minute

Key Takeaways

  • Nexter Blocks Draw SVG block creates SVG drawing animations from a custom SVG file in WordPress.
  • Vivus Instant checks SVG file compatibility by drag and drop, and the SVG is usable with the Draw SVG block only if it animates in the UI.
  • Icon block displays static icons without animation overhead and supports Font Awesome icons and custom SVG.
Table of Contents

With the Draw SVG block from Nexter Blocks, you can create SVG drawing animations from a custom SVG file in WordPress.

To check the complete feature overview documentation of the Nexter Blocks Draw SVG block, click here.

If you only need to display a static (non-animated) icon on a page, use the Icon block instead, which supports Font Awesome icons and custom SVG without animation overhead.

Requirement xe2x80x93 This block is part of Nexter Blocks. Make sure it is installed and activated.

LIVE BLOCK LINK

Check SVG Compatibility

To use a custom SVG with the Draw SVG block, you have to check the SVG file compatibility using Vivus Instant.

Just drag and drop your SVG file in the UI and if the SVG animates then it is good to use with the Draw SVG block but if it doesn’t animate then you have to modify the SVG file and test again.

Use Custom SVG

To do this, add the Draw SVG block to a page and follow the steps:

1. Select Custom Upload from the SVG Options section.

2. Then add your SVG file from the Upload SVG section.

Make any additional adjustments using the other settings.

Note: Your SVG file will always show in an outline mode even if it has fill color. You have to add a fill color by enabling the Fill Color toggle.

Now you can see a drawing animation of your custom SVG file.

About the Author

Photo of Aditya Sharma CMO of Nexter
CMO at POSIMYTH Innovations · Nexter · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressThemesElementorn8nAIClaudeAutomationServer
X GitHub YouTube Website

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

Why won’t my SVG animate in the Draw SVG block?

The usual blocker is SVG compatibility. Nexter Blocks uses Vivus Instant to test the file, so if the SVG animates when you drag and drop it there, it should work with the Draw SVG block. If it does not animate in that test, the SVG needs to be modified and tested again. That saves time because the issue is in the file itself, not the WordPress block.

What do I need installed before using a custom animated SVG in WordPress?

The Draw SVG block is part of Nexter Blocks, so Nexter Blocks has to be installed and activated first. Without that, the custom animated SVG workflow described on this page will not be available. That matters because the animation feature is tied to the block itself, not to WordPress core or a generic SVG upload.

Can I use a custom SVG for a static icon instead of an animation?

The Icon block is the better fit when you only need a static icon. It supports Font Awesome icons and custom SVG without animation overhead, which keeps things simpler when motion is not needed. For animated drawing effects, use the Draw SVG block instead. The page also links to the Icon block if you want that non-animated route.

How do I add a custom animated SVG icon in WordPress with Nexter Blocks?

The Draw SVG block handles the animation from a custom SVG file in WordPress. Add the block to a page, choose Custom Upload under SVG Options, then upload your SVG in the Upload SVG section and adjust the other settings as needed. The key detail is that this workflow creates a drawing animation from your own file rather than using a preset icon.

Why does my uploaded SVG look like an outline instead of showing its fill color?

That outline look is expected with this block. The page notes that your SVG will always show in outline mode even if it has fill color, so you need to enable the Fill Color toggle if you want color visible. This is an easy thing to miss because the animation can look correct while still appearing visually unfinished.

Where can I see an example of the animated SVG icon block before using it?

The page points to a LIVE BLOCK LINK for the Draw SVG block, which is useful if you want to see how the animated icon behaves before building with it. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this as part of its blocks library.

Last reviewed: August 25, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53