---
title: "How to Add Icons in WordPress?"
url: https://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://nexterwp.com/wp-content/uploads/2024/05/icon-block-settings-overview-1024x519.jpg
word_count: 352
---

# How to Add Icons in WordPress?

## Key Takeaways

- Nexter Blocks allows users to add icons or custom SVGs to their WordPress website using the Icon block.
- The Icon block supports adding a link to the icon or custom SVG, enhancing interactivity.
- Users can customize icon size and rotation for responsive devices, setting values in PX, %, EM, DEG, or RAD.

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://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://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://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://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Icon block is not showing up in WordPress?**
A: If the Icon block isn't appearing, first ensure that the Nexter Blocks plugin is installed and activated. Then, check if the Icon block is activated by navigating to Nexter u2192 Blocks and searching for 'Icon'. If it's not activated, toggle it on. This step is crucial because without activating the block, it won't be available for use.

**Q: What are the best practices for sizing icons in the Icon block?**
A: For optimal display, set the icon size using the Size section in the Icon block settings. You can specify the size in pixels (PX), percentage (%), or em units. This is important for ensuring that icons are responsive and visually appealing across different devices. Remember to test how the icons look on various screen sizes.

**Q: How do I add a link to an icon using the Icon block?**
A: To add a link to your icon, go to the Link section within the Icon block settings. Here, you can enter a custom URL that the icon will link to. If you're using the PRO version of Nexter Blocks, you can also add dynamic links, which can be particularly useful for creating more interactive elements on your site.