---
schema_version: "1"
id: 9b07decca01c0940017e55a7e14eba3ea693da6821cc19c0a340db7e42433ec5
title: Add an Icon to a Flexcard (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_an_icon_to_a_flexcard.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_icon_to_a_flexcard.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: c3a56fb638102184d03d3c4597b1be9908514e4b36e5486facbf6c192946eff4
description: For the managed package runtime, display an SVG Icon on a Flexcard. Select from a Salesforce SVG icon or a custom action. You can also link the icon to an action.
products:
  - Omnistudio
release: "264"
---
# Add an Icon to a Flexcard (Managed Package)

For the managed package runtime, display an SVG Icon on a Flexcard. Select from a Salesforce SVG icon or a custom action. You can also link the icon to an action.

![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).

1. From the Flexcard Designer, drag an Icon element from the Build panel into a state on the canvas.
2. (Optional) From the Properties panel, update the element name in the **Element Name** field.
3. From the **Type** dropdown, select an icon type.
4. To configure a **Custom** icon, enter the source of the icon in the **Source** field.
5. To configure **Salesforce SVG** icon properties:
    
    1. To select the icon, from the **Icon** field, perform one of the following tasks:
        
        - Enter the name of the icon, such as utility:arrowdown. See [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/icons/).
        - Click the search icon in the input field, and perform one of the following tasks:
            
            - Click to select an icon from the list available, and click **Save**.
            - Search for an icon in the search field, click an icon to select it, and click **Save**.
    2. (Optional) Select a style variant from the **Variant** dropdown.
6. (Optional) To update the size of the icon, select a new size from the **Size** dropdown.
7. To link the icon to an action, click **\+ Add Action**. To configure action properties, see [Flexcards Action Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_action_properties.htm&release=264.0.0&type=5 "For the managed package runtime, Action element properties are configurable from the Properties panel in the Flexcard Designer when you select an Action element. With the Action element, create an action to launch an Omniscript, navigate to a web page or application, display a flyout, fire an event, and more.").
8. (Optional) To add conditions that must be met for the element to display, see [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer.").
9. (Optional) To style your icon element, click **Style** to open the Style panel, and see [Flexcards Icon Style Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_icon_style_properties.htm&release=264.0.0&type=5 "For the managed package runtime, configure style properties specific to the Icon element from the Style panel of the Flexcard Designer.").

What’s next: Preview your Flexcard. See [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements.").

- **[Flexcards Icon Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_icon_properties.htm&release=264.0.0&type=5)**  
    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.