---
title: "How to Add Icons in WordPress?"
url: https://qa.nexterwp.com/docs/add-icon-in-wordpress/
date: 2024-03-01
modified: 2026-04-14
author: "Aditya Sharma"
description: "Adding icons or custom SVG to a WordPress website can improve the aesthetics and add a unique touch to it. With the Icon block from the Nexter Blocks, you can..."
image: https://qa.nexterwp.com/wp-content/uploads/2024/05/icon-block-settings-overview-1024x519.jpg
word_count: 352
---

# How to Add Icons in WordPress?

## Key Takeaways

- Activating the Icon block requires the Nexter Blocks plugin installed and the default WordPress Block editor active.
- Users can add icons from Font Awesome or upload custom SVGs using the Icon block's Content tab.
- The PRO version of Nexter Blocks allows dynamic link addition to icons via a cylindrical icon feature.

Adding icons or custom SVG to a WordPress website can improve the aesthetics and add a unique touch to it.

With the Icon block from the Nexter Blocks, you can easily add icons or custom SVG to your WordPress website.

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

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](http://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Icon block is activated, to verify this visit Nexter → Blocks → and Search for Icon and activate. 

## Learn via Video Tutorial

https://www.youtube.com/watch?v=uQ6xzimrLi0

## How to Activate the Icon Block?

Go to 

- **Nexter **→ **Blocks** 

- **Search **the block name** **and** turn on the toggle**.

![](https://qa.nexterwp.com/wp-content/uploads/2024/03/icon-activation-new-1-1024x330.png)

## Key Features

- **Add icon/custom SVG **- You can easily add an icon or image to the button.

- **Add a link** -  You can easily add a link to the icon or custom SVG.

## How to Use the Icon Block?

Add the Icon block to the page, then from the **Icon** section under the **Content** tab, you can add an icon from Font Awesome or you can upload a custom SVG.

Depending on the selection, you’ll get different options to add the icon or image to the icon. 

You can align the icon from the **Alignment** section.

From the **View** section, you can add a background or a border to the icon.

Then, from the **Link** section, you can add a custom link to the icon.

If you are using the [PRO version of the Nexter Blocks](https://qa.nexterwp.com/nexter-blocks/?from=tpblocks&utm_source=tpag&utm_medium=docs&utm_campaign=text), you can add a link dynamically by clicking on the cylindrical icon.

From the **Size **section, you can set the size of the icon for responsive devices. You can set the value to **PX **(pixels), **%** (percentage), or **EM**. 

From the **Rotate **section, you can manage the rotation of the icon for responsive devices. You can set the value to **DEG **(degree), or **RAD **(radian).

From the **Normal** and **Hover **tab** **section, you can set the color of the icon for normal and hover states.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://qa.nexterwp.com/docs/add-advanced-tab-in-wordpress/)