---
title: "How to Tag The Icon Box Widget for Figma to Elementor?"
url: https://uichemy.com/docs/tag-the-iconbox-widget-for-figma-to-elementor/
date: 2023-07-20
modified: 2026-04-14
author: "Sagar Patel"
description: "Are you showing any key features, benefits, or services on your Figma design? Then you can tag those elements to the Elementor IconBox widget using the UiChemy plugin. Using the..."
image: https://uichemy.com/wp-content/uploads/2023/05/How-to-Tag-The-IconBox-Widget-for-Figma-to-Elementor_-min-1024x536.jpg
word_count: 363
---

# How to Tag The Icon Box Widget for Figma to Elementor?

## Key Takeaways

- UiChemy allows tagging of elements in Figma designs to the Elementor IconBox widget.
- The Step by Step Method enables users to select and tag a frame containing an icon, title, and description as an Icon Box widget.
- Exporting the design after tagging results in the Icon Box widget using all specified information.

Are you showing any key features, benefits, or services on your Figma design? Then you can tag those elements to the Elementor IconBox widget using the UiChemy plugin.

Using the IconBox widget, you can take advantage of its features directly when you export the template.

## What Can be Tagged?

A frame containing an icon, title, and description can be tagged as an Icon Box widget.

## How to Tag?

To do this, you can choose between two options: **Step by Step Method** or **Express Conversion**.

Here, we’ll go with the **Step by Step Method**.

- First, select the **Step by Step Method **and click on the** Start **button.

- Select the top-level page or frame of your layout, then click on the **Next **button.

- Under the **Widget Tagging Mode** tab, select the **Manual Widget Tagging** Option.

- Next, under the **Manage Auto Layout** tab, you’ll see two options:** *It’s already in Auto Layout*** and ***Convert to Auto Layout***. We’ll go with the **first option**.

- After that, under the **Tag Widgets** tab, choose the frame or container that contains your element (Widget). Then, search for the **Icon Box **widget in the UiChemy panel and select it. Here, you’ll see [all the supported Elementor widgets](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/).

Then you’ll see widget specific tagging options, and most of the options will be auto-filled based on your design.

- The **Icon** field will be automatically filled, but you can click the dropdown to change the icon. It will automatically list all the available options within your selected element. You can also select any frame or element to be used as an icon by clicking on the eyedropper tool, and the option will be available in the dropdown as well.

- The **Title** field will be automatically filled, but you can click the dropdown to change it.

- In the **Description** field, it will be automatically filled, but you can click the dropdown to change it.

- From the **Title** **Html Tag** field, you can assign an HTML tag to the Icon Box title.

- Once done, click the **Save **button to complete the tagging, and you’ll see a Tagged successfully message.

Now if you export the design, that element will use the Icon Box widget with all your specified information.

![exported template with iconbox](https://uichemy.com/wp-content/uploads/2023/07/exported-template-with-iconbox-new.gif)

## Resource

- [Figma Example](https://www.figma.com/design/fqYegwSczwfSUbN7RMPYk5/Tagging-Examples-Staging-v16?node-id=868-138&t=4zLA5i3NGEw152SG-1)

## Frequently Asked Questions

**Q: What should I do if the Icon Box widget doesn't appear after tagging?**
A: If the Icon Box widget doesn't show up after tagging, ensure that you selected the correct frame or container that contains your element. Double-check that you followed the tagging steps accurately, especially under the Tag Widgets tab. If issues persist, try re-exporting the design to see if the changes take effect.

**Q: What is the best method for tagging the Icon Box widget?**
A: The Step by Step Method is the recommended approach for tagging the Icon Box widget. This method allows you to manually select and tag elements, ensuring that all fields like the icon, title, and description are accurately filled based on your design. This level of detail helps maintain the integrity of your design during the export process.

**Q: Are there any limitations when tagging the Icon Box widget?**
A: One limitation is that the UiChemy Figma Plugin only supports tagging elements for the Icon Box widget if they are structured correctly in Figma. If your design does not include a frame with an icon, title, and description, you won't be able to tag it as an Icon Box widget. Ensure your design meets these criteria before tagging.