---
schema_version: "1"
id: f8ef05231fd8fbf0c13a3503528c3cd370362670ccbf409e9f444287d782c528
title: Flexcards Icon Properties (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_icon_properties.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_icon_properties.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 9aa6e75fb9b060a5ad304e4a6f17a755ddbc8b07e0be4fc3d2a4d7df952f47c4
description: For the managed package runtime, icon element properties are configurable in the Property Panel when you select an Icon element in the Flexcard Designer. With the Icon element, display a Salesforce SVG Icon or a custom icon on a Flexcard.
products:
  - Omnistudio
release: "264"
---
# Flexcards Icon Properties (Managed Package)

For the managed package runtime, icon element properties are configurable in the Property Panel when you select an Icon element in the Flexcard Designer. With the Icon element, display a Salesforce SVG Icon or a custom icon on a Flexcard.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col>
        <col>
        <col>
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d35036e47">
            <p style="margin-bottom:0;">Property</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d35036e53">
            <p style="margin-bottom:0;">Description</p>
          </th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d35036e59">
            <p style="margin-bottom:0;">Reference</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Add Action</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Make the element a clickable action.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Conditions</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Add a condition that must be met for the element to display.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Element Name</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">The name of the element as seen on the canvas. Used to distinguish one element from another as you build your Flexcard in the designer. Is used only within the designer.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">

          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Extra Class</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Add an additional class to the element.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Icon</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Enter the name of the Salesforce Icon.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Image Source</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Enter the URL of a custom icon.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Size</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Select the size of the icon.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Type</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Select the type of icon to display.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e47 ">
            <p style="margin-bottom:0;">Variant</p>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e53 ">
            <p style="margin-bottom:0;">Select from predefined SLDS styles to change the appearance of the element.</p>
          </td>

          <td data-label="Reference" class="slds-cell-wrap" style="vertical-align:top;" headers="d35036e59 ">
            <p style="margin-bottom:0;">n/a</p>
          </td>

        </tr>
      </tbody>
    </table>