---
title: "How to Add Custom Animated SVG Icon in WordPress?"
url: https://nexterwp.com/docs/add-custom-animated-svg-icon-in-wordpress/
date: 2024-12-05
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add a custom animated SVG icon to your WordPress website? Adding a custom SVG animation can make your site more engaging and visually appealing. With the..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Custom-Animated-SVG-Icon-in-WordPress_-1024x519.jpg
word_count: 249
---

# How to Add Custom Animated SVG Icon in WordPress?

## Key Takeaways

- Nexter Blocks includes the Draw SVG block, which allows users to create SVG drawing animations from custom SVG files.
- Vivus Instant checks SVG file compatibility, ensuring the SVG animates before use with the Draw SVG block.
- Users must enable the Fill Color toggle to add a fill color to their custom SVG file for proper display.

Do you want to add a custom animated SVG icon to your WordPress website? Adding a custom SVG animation can make your site more engaging and visually appealing.

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

*To check the complete feature overview documentation of the Nexter Blocks Draw SVG block,* *[ click here](https://nexterwp.com/docs/create-draw-svg-animation-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-draw-animated-svg-icon/)

### Check SVG Compatibility

To use a custom SVG with the Draw SVG block, you have to check the SVG file compatibility using [Vivus Instant](https://maxwellito.github.io/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. 

![](https://nexterwp.com/wp-content/uploads/2024/12/draw-svg-custom-svg-new.png)

Do the necessary adjustments from 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 should be able to see a beautiful drawing animation of your custom SVG file.

## Frequently Asked Questions

**Q: What should I do if my SVG file doesn't animate in the Draw SVG block?**
A: If your SVG file doesn't animate, it likely isn't compatible with the Draw SVG block. Use Vivus Instant to check compatibility by dragging and dropping your SVG file into the UI. If it animates, it's good to go. If not, you'll need to modify the SVG file and test it again.

**Q: Can I use the Draw SVG block with any SVG file?**
A: Not all SVG files are compatible with the Draw SVG block. You must check the SVG file's compatibility using Vivus Instant. Only SVGs that animate in this tool can be used effectively in the Draw SVG block from Nexter Blocks.

**Q: What is the best way to add fill color to my SVG in the Draw SVG block?**
A: To add fill color to your SVG, enable the Fill Color toggle in the settings after uploading your SVG file. Keep in mind that your SVG will initially display in outline mode, so this step is crucial for achieving the desired visual effect.

**Q: How do I upload a custom SVG file in WordPress using Nexter Blocks?**
A: To upload a custom SVG file, add the Draw SVG block to your page and select 'Custom Upload' from the SVG Options section. Then, upload your SVG file in the Upload SVG section to start creating your animation.