---
title: "Vector Graphic Block"
source: "https://docs.nexcess.com/software/kadence/vector-graphic-block/"
description: "The Kadence Vector Graphic Block allows you to insert SVG Vector Codes directly into the block, allowing you to add scalable vector graphics to your content. Wi…"
vertical: "Software"
area: "Kadence"
date: "2025-03-19"
last_modified: "2026-07-02"
---

# Vector Graphic Block

The **Kadence Vector Graphic Block** allows you to insert **SVG** **Vector Codes** directly into the block, allowing you to add scalable vector graphics to your content. With this feature, you can even use multi-color vector images across your website. The **Vector Graphic Block** is a block available in the free [**Kadence Blocks**](https://wordpress.org/plugins/kadence-blocks/) plugin.

In this document, you’ll learn how to add *SVG code* to the **Vector Graphic Block** and make the most of its features.

![Vector Graphic Demo](https://docs.nexcess.com/wp-content/uploads/2026/06/Vector-Graphic-Demo.gif)

Getting SVG Codes

To use the Vector Graphic Block, you’ll need to copy and paste SVG code into the block. Many websites provide free SVGs and allow you to copy their code directly.

SVG Security Information

When using SVG formats, there are factors related to Security that should be taken into consideration. You should understand SVGs enough to be comfortable using them. Consider reading [This SolidWP Article](https://solidwp.com/blog/what-is-an-svg-file/) that provides a general overview of what SVGs are and how they are used.

One reliable source for SVGs is **[SVG Repo](https://www.svgrepo.com/)**, which provides a wide selection of graphics that you can copy and paste.   
  
You can click on the **Edit** **Vector** button to access the **Copy** **SVG** feature in *SVG Repo*.

![Copy SVG](https://docs.nexcess.com/wp-content/uploads/2026/06/Copy-SVG.gif)

If you have an **SVG** **file** and/or your preferred platform doesn’t offer a direct *Copy SVG* option, you can open the file in a text editor to retrieve the **SVG** **Code** manually.

- **Right-click** on the SVG file and select the open with option.
- Then, choose a text editor such as **Notepad, TextEdit, or VS Code**.   
    *(Every computer comes with at least one built-in text editor.)*
- Once the file is open, **select all the text** inside.
- **Right-click** and choose **Copy** to copy the SVG code to your clipboard.

![Copy code](https://docs.nexcess.com/wp-content/uploads/2026/06/Copy-code.gif)

Once you have the SVG code, you will need to add it to the Vector Graphic Block. View the next section to get started.

The Vector Graphic Block

You can add a **Vector** **Graphic** **Block** to the editor by searching for the term *Vector Graphic* when adding a new block.

![Adding a Vector](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-a-Vector.gif)

Once the block is added to the page, access the **Vector** **Block** **Settings** to begin setting up your *Vector*.

![Vector Graphic Block Settings](https://docs.nexcess.com/wp-content/uploads/2026/06/Vector-Graphic-Block-Settings-1024x721-1.jpg)

In the **Vector Graphic Block** settings panel, locate the first setting named **Select** **Vector Graphic**.

1. Click **Add New Vector Graphic** to begin adding your SVG.
2. In the modal that appears, enter a **name** for your vector image.
3. Paste the **SVG code** into the provided field.
4. Click **Save** to store the vector graphic.

![Adding Vector](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-Vector.gif)

Once saved, the vector image will be applied to the current block. Additionally, it will be available in the **Select Vector Graphic** dropdown for future use.

You can use the **Max Width** setting to adjust the maximum width of the *vector image*, allowing you to control its size.

![Max Width](https://docs.nexcess.com/wp-content/uploads/2026/06/Max-Width.gif)

You can use the **Block** **Toolbar** to adjust the **Alignment** for the **Vector** **Image**. This can be set to **Left**, **Right**, or **None**. *(Having no selection or the None selection will center the Image)*

![Alignment](https://docs.nexcess.com/wp-content/uploads/2026/06/Alignment.gif)

You can also access the **Advanced Block Settings** to add **Padding** or **Margin** to the vector graphic or to apply a **Custom CSS class** and/or **Custom HTML anchor** for further customization.

![Vector Graphic advanced Settings](https://docs.nexcess.com/wp-content/uploads/2026/06/Vector-Graphic-advanced-Settings-438x1024-1.jpg)

Managing existing Vector Graphics

After adding a *Vector Graphic* to your website, you may want to rename it later or delete it entirely from the website. To do this, go to **Dashboard → Kadence → Settings**, then click the **Manage Vector Graphics** button.

![Managing Vectors](https://docs.nexcess.com/wp-content/uploads/2026/06/Managing-Vectors-scaled-1.jpg)This will display a list of all *Vector Graphics* on your website. Hover over a vector graphic to perform a **quick** **edit**, make a **full** **edit**, or **delete** it from your library entirely.

![Editing Vectors](https://docs.nexcess.com/wp-content/uploads/2026/06/Editing-Vectors.gif)