Contents

Cancel

Recommended Articles

  1. unify-apps

    Indexing

    Unify AI

    Transform raw content into searchable knowledge through AI-powered indexing and vector embeddings

  2. unify-apps

    IMAP

    Unify Integrations

    Integrate your app with IMAP to enable seamless email synchronization, real-time access, and enhanced communication workflows.

  3. unify-apps

    Preview Your Work

    Unify Automations

    Effortlessly review & monitor your automation’s performance

  4. unify-apps

    QuickBooks

    Unify Integrations

    Integrate your app with QuickBooks to streamline accounting, automate invoicing, and manage finances effortlessly

  5. unify-apps

    FTP/FTPS

    Unify Integrations

    Connect your app with FTP/FTPS to automate secure file transfers and streamline data exchange across systems.

  6. unify-apps

    Facebook Ads

    Unify Integrations

    Connect your app with Facebook Ads to automate campaign management, optimize ad performance, and track marketing success.

  7. unify-apps

    Snowflake

    Unify Automations

    Connect to Snowflake for fast, scalable cloud data warehousing and analytics

  8. unify-apps

    Button

    Unify Applications

    Create interactive elements with ease using buttons

  9. unify-apps

    BambooHR

    Unify Automations

    Integrate your app with BambooHR to streamline HR management, automate employee data processing, and enhance onboarding workflows

  10. unify-apps

    Build your first automation

    Unify Automations

    Learn how to build your automation step by step

  11. unify-apps

    User Management

    Unify Applications

    Efficiently manage user roles and permissions

  12. unify-apps

    Microsoft Teams

    Unify Automations

    Connect your app with Microsoft Teams to enhance communication, automate workflows, and foster collaboration across your organization

  13. unify-apps

    Jira

    Unify Automations

    Use Jira to plan, track, and manage your agile and software development projects

  14. unify-apps

    Pre Processing

    Unify AI

    Optimize query processing through intelligent rephrasing, retrieval, and ranking to deliver accurate AI responses

  15. unify-apps

    Google Calendar

    Unify Integrations

    Integrate your app with Google Calendar to streamline scheduling, automate event management, and improve team coordination

  16. unify-apps

    SAP HANA

    Unify Integrations

    Connect your app with SAP HANA to leverage in-memory computing for real-time data processing and advanced analytics at scale.

#
Unify Applications
Logo
Add Components to your Interface
Logo
Icon

Icon

Logo

2 mins READ

Overview

An icon is a small image or symbol used to represent a function in an application. This article will walk you through how you can configure icon components.

Image
Image

Key Properties

Once the Icon component is added, you can customize it through the properties panel on the right side of the screen.

  • Choose an Icon: Select an icon from the dropdown menu which includes symbols for actions like saving, deleting, editing, etc.

  • Add a Tooltip: Enter text to display as a tooltip. This text appears when the user hovers over the icon, providing additional context or information about the icon's purpose.

Appearance Customization

The Icon Button component can be styled to match your application's design:

Property

Description

Color

Choose a color for your Icon Button. Options include brand colors, neutral (black) or danger color (red).

Size

Adjust the size of the Icon Button. Options include Small (sm), Medium (md), and Large (lg)

Variant

Select the button variant from options like Solid (with background fill), Outline (with outline border), or Ghost (with just text).

Padding

Add or adjust padding to change the spacing around the icon. You can find padding under Styles section

Define Interactions

Define the interactions that should occur when the icon is clicked or interacted with. This can be configured by adding a new interaction under the "Interactions" section.

Thumbnail

Refer

Check out the Interactions article for more details on setting up various types of interactions.

Best Practices

  • Consistency: Use icons consistently throughout your application to avoid confusion. For example, always use the same trash icon for delete actions.

  • Simplicity: Choose simple and recognizable icons. Overly complex icons can be difficult to understand at smaller sizes.