How to Add an Email Icon to WordPress Block-Based Websites (2 Ways)

Every website needs a way for visitors to reach out, and email remains one of the simplest and most direct options. It is only possible if your contact methods are visible.

But just dropping an address into your footer isn’t always enough. A clean, clickable email icon instantly catches the eye and tells people exactly how to get in touch.

In this quick guide, I’ll show you how to add an email icon to your WordPress site using beginner-friendly methods, yet flexible enough for any layout.

How to Add an Email Icon to WordPress Block-Based Websites

To add an email icon, we will use Ultimate Blocks, the ultimate block plugin that has unified the functionality of 25+ blocks in one place. But before that, we will install the plugin.

Method 1: Add Email Icon Using the Styled List Block

We will try to use the Styled List block of the Ultimate block as it lets you add both icon and text side by side. But first, we will have to install the plugin.

Step 1: Install and Activate Ultimate Blocks

If you haven’t already installed Ultimate Blocks, follow these quick steps:

1. Go to your WordPress dashboard.
2. Navigate to Plugins → Add New.
3. Search for Ultimate Blocks.
4. Click Install Now, then hit Activate.

Once activated, you’ll have access to the Styled List Block and 23+ other useful blocks for content creation.

Step 2: Add the Styled List Block

1. Edit the page or post where you want to place the email icon.
2. Click the ➕ Add Block button.
3. Search for Styled List and select the Block.

1. Write your email address in the Styled List block.
2. Search for “Envelop” in the Icon Search box to select the mail icon.
3. Select the icon that you like.

Step 3: Insert the Link

1. Select Your Email ID in the editor.
2. Click the Link Icon in the top toolbar.

To check if it has linked the email address correctly

1. Click the email ID
2. Click the Edit button.
3. Check the link.

And that’s how you can add an active and working email icon. The mailing application will open on your device whenever the email ID is clicked.

Tips: This method is perfect for displaying an email ID with an email icon.

Method 2: Add Email Icon Using the Icon Block

Alternatively, you can only insert the Email icon using the Icon block of Ultimate Blocks. You must install the Ultimate Blocks before proceeding to the method.

Step 1: Add the Icon Block

• Edit the page or post where you want to place the email icon.
• Click the ➕ Add Block button.
• Search for Icons and select the Icons Block from Ultimate Blocks.

Step 2: Choose Your Icon

1. Select the Icon library to insert an icon or Insert Custom SVG if you have a custom icon.
2. If you choose the Icon library, search for “Envelop” and it will show your email icons.
3. Choose one that suits you the most.

Step 3: Link Your Email Icon

1. Select the Email Icon Block
2. Click on the Link menu of the top toolbar.
3. Enter your email in this format: “mailto:youremail@example.com”

You can place the icon block in any place you like. Here is the demo below.

Tips: This method is perfect for displaying an email icon.

Final Thoughts!

The Icons Block and the Styled List Block of Ultimate Blocks make it easy to add functional icons without dealing with third-party libraries or HTML. Remember, Ultimate Blocks works only with the Block Editor.

If you’re already using Ultimate Blocks, this method keeps everything within the native WordPress editor and saves you from plugin overload.

Try it out and see how simple design updates can improve your site’s usability. Let us know your thoughts in the comment section below. Also, share this with your folks through social media.

Read More!

How to Change Social Icons Color in WordPress (3 Easy Steps)
How to Add an Icon to a Heading in WordPress
How to Use the Social Icons Block In WordPress
How to Add a Site Icon (Favicon) to Your WordPress Site
How to Add Feature Boxes With Icons in WordPress (2025)