---
title: "Icon element - Convert Forms"
description: "Add an icon to your Convert Forms form, like a green check mark on the thank-you page, from 1,854 Lucide icons."
url: "https://www.tassos.gr/docs/convert-forms/fields/icon"
date: "2026-11-11T03:07:21+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Convert Forms ](https://www.tassos.gr/docs/convert-forms) / [ Field Types ](https://www.tassos.gr/docs/convert-forms/fields)

#  Icon element

##  Add an icon to your Convert Forms form, like a green check mark on the thank-you page, from 1,854 Lucide icons.

 Heads up: this feature is new in Convert Forms 6 and is only in the latest beta release. On Convert Forms 5, this page won't match your backend. [Download the beta](https://www.tassos.gr/releases/convert-forms-beta) and back up your site first.

The Icon element adds an icon to your form. Put a green check mark above a thank-you message, or an icon over a section heading.

You pick from 1,854 icons in the [Lucide](https://lucide.dev/icons/) set. The Icon element works in the free version. It collects nothing from visitors, so it never shows up in submissions.

## [Add an icon](#add-an-icon)

1. Log into your Joomla backend.
2. Go to Components → Convert Forms → Forms.
3. Open your form.
4. Click Form in the left sidebar.
5. Click the page or [ending](https://www.tassos.gr/docs/convert-forms/features/ending-pages) you want the icon on.
6. Click Add (+) in the left sidebar.
7. Click Icon, under Layout.

    [![The Add panel scrolled to the Layout group, with an arrow pointing at the Icon element](https://www.tassos.gr/images/2026/11/convert-forms-icon-element-add.png)](https://www.tassos.gr/images/2026/11/convert-forms-icon-element-add.png)
8. The icon appears at the bottom of the page, and its settings open in the right sidebar. New icons start as a star.

To move the icon, drag it in the Form tree.

## [Pick an icon](#pick-an-icon)

1. Click the Icon dropdown in the right sidebar.
2. Type part of the icon's name in the search box, for example circle-check.

    [![The icon picker searching for circle-check, with an arrow pointing at the first result](https://www.tassos.gr/images/2026/11/convert-forms-icon-element-picker.png)](https://www.tassos.gr/images/2026/11/convert-forms-icon-element-picker.png)
3. Click the icon you want.
4. Save the form.

The search matches icon names only. Lucide renamed some icons in version 1, so smile finds nothing while face-slightly-smiling does. If a search comes up empty, look the icon up on [lucide.dev](https://lucide.dev/icons/) and search for the name it shows there.

## [Icon settings](#icon-settings)

[![A green circle-check icon above the Application received heading, with its settings in the right sidebar](https://www.tassos.gr/images/2026/11/convert-forms-icon-element-settings.png)](https://www.tassos.gr/images/2026/11/convert-forms-icon-element-settings.png)

- **Icon**: the icon to show.
- **Size**: the icon's width and height, in pixels. The default is 48.
- **Color**: leave it empty to use the form's text color.
- **Weight**: how thick the icon's lines are: Thin, Light, Regular or Bold.
- **Alignment**: left, center or right on its row. The default is center.
- **Margin Top** and **Margin Bottom**: the space above and below the icon, in pixels.

Advanced holds the CSS classes, and Logic shows or hides the icon with [Conditional Logic](https://www.tassos.gr/docs/convert-forms/features/conditional-fields), the same as any other element.

 Last updated on Nov 10th 2026 14:11