Skip to content

How to Add Custom Animated SVG Icon in WordPress?

Updated On : September 13, 2026By : Reading Time : 2 minutes

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

Your own logo or icon drawing itself on screen is a memorable touch for a hero section or an about page.

The free Draw SVG block in Nexter Blocks animates any compatible SVG file you upload.

For every Draw SVG setting in one place, see the Draw SVG block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
  • Block to enable: Draw SVG, switched on under Nexter > Blocks in your WordPress dashboard.
  • An SVG file made of lines (strokes). Shapes that are only filled show little drawing.
  • Permission to upload SVGs: administrators and editors can upload them directly. Other roles need SVG Upload turned on in Nexter Extension.

Steps

  1. Test your file first: drop it into Vivus Instant. If it animates there, it will animate in the block.
  1. Add the Draw SVG block and select Custom Upload under SVG Options.
SVG Options set to Custom Upload with the Upload SVG field
  1. Click Upload SVG and choose your file from the Media Library or upload it.
  1. Set Border/Stroke Color, and turn on Fill Color if the icon should end up filled.
The Fill Color switch turned on with a colour chosen
  1. Pick Type, Duration and Draw Method, then save and scroll to the icon.

How It Behaves

  • The block replaces the colours in your file: lines use Border/Stroke Color and shapes stay unfilled unless Fill Color is on.
  • The lines draw when the icon comes into view (On Scroll) or replay on hover (On Hover).
  • Uploaded SVG files are cleaned for security when they are uploaded.

Limitations

  • Your SVG’s original colours are not kept. Pick them again in the block.
  • Icons with deeply nested groups may keep some of their original colours.
  • Filled artwork without strokes, such as photos traced to SVG, barely animates.

Troubleshooting

The icon shows but does not draw

The file has no strokes. Check it in Vivus Instant, or export it from your design tool with outlines as strokes.

“Sorry, you are not allowed to upload this file type”

Your user role cannot upload SVGs. Ask an administrator, or turn on SVG Upload in Nexter Extension for your role.

Related Docs

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: September 14, 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