---
title: "How to Tag The Social Icons Widget for Figma to Elementor?"
url: https://uichemy.com/docs/tag-the-social-icons-widget-for-figma-to-elementor/
date: 2023-09-21
modified: 2026-04-14
author: "Sagar Patel"
description: "If you are using social icons in your Figma design, you can easily tag those elements as an Elementor Social Icon widget using the UiChemy plugin. So when you export..."
image: https://uichemy.com/wp-content/uploads/2023/05/How-to-Tag-The-Social-Icons-Widget-for-Figma-to-Elementor_-min-1024x536.jpg
word_count: 389
---

# How to Tag The Social Icons Widget for Figma to Elementor?

## Key Takeaways

- UiChemy allows tagging of social icons in Figma designs as an Elementor Social Icon widget.
- Users can choose between Step by Step Method or Express Conversion for tagging widgets in UiChemy.
- Tagging options auto-fill based on design, and users can add new icons up to the number present in the design.

If you are using social icons in your Figma design, you can easily tag those elements as an Elementor Social Icon widget using the UiChemy plugin.

So when you export the design as an Elementor template, that particular section will use the Social Icons widget.

## What Can be Tagged?

A frame containing multiple nested frames with an icon (Font Awesome 5 or SVG icon) can be tagged as a Social Icons 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 **Social Icons **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.

- As per your design, you’ll see an equal number of **Icon Frame** fields created with a selected icon in each field. However, you can click the dropdown to change each option. 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. You can click on the **+ Add New **button to add more icons.

> *Note: You can only add icon frame fields up to the same number of social icons added in your design. If you add any extra fields, it will be removed automatically once you save the changes, but if you add less number of fields, only those will be exported, not all the social icons of the layout.*

- 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 Social Icons widget with all your specified information.

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

## Resource

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

## Frequently Asked Questions

**Q: What should I do if the Social Icons widget is not tagging correctly?**
A: If the Social Icons widget isn't tagging correctly, ensure that your Figma design contains a frame with multiple nested frames that include either Font Awesome 5 or SVG icons. If the tagging fails, check that you're selecting the correct frame in the UiChemy panel and that you have the right number of icon frame fields corresponding to your design. Remember, any extra fields will be removed upon saving.

**Q: What is the best method to tag social icons for Elementor using UiChemy?**
A: The best method to tag social icons for Elementor is the Step by Step Method in the UiChemy plugin. This method allows for precise control over the tagging process, ensuring that each icon is correctly linked to the Social Icons widget. Be sure to select the 'Manual Widget Tagging Option' for optimal results.

**Q: What happens if I add more icon frame fields than social icons in my design?**
A: If you add more icon frame fields than the number of social icons in your design, the extra fields will be automatically removed when you save your changes. This ensures that only the intended icons are exported to Elementor, so it's crucial to match the number of fields with your design's social icons.

**Q: Are there any limitations when tagging the Social Icons widget in UiChemy?**
A: One limitation when tagging the Social Icons widget is that you can only add icon frame fields up to the number of social icons present in your design. If you attempt to add more fields, they will be discarded upon saving, which could lead to missing icons in your final export. Always double-check your design before tagging.