--- schema_version: "1" id: fc87689b6141f8fe154e9ce374ead4f4929de319e3e0653f603c00496a7bd287 title: Icon Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_icon_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_icon_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: f4be621b7620814ce5c1ecef2ee1219f8ee297bee20a40d8fd5e98035f1239ec description: For the managed package runtime, this page contains an Icon LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # Icon Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains an Icon LWC ReadMe for each Vlocity release. ![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). ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _Icon Lightning Web Component_ renders an SVG icon. ## Available c-icon Attributes

Attribute

Value

Type

Required

Description

alternative-text

  

string

  

Adds alternative text for the icon. For best practice, if icon is part of a button or is clickable, text should describe what action is taken, such as 'Upload File', and not what the icon is, such as "Paperclip".

baseurl

URL

string

  

Overrides the defined url for the SVG resource.

bg-color

Accepts name, rgb and hex values

string

  

Adds a background color to the icon.

color

Accepts name, rgb and hex values

string

  

Sets the color of the icon.

extraclass

  

string

  

Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

icon-name

(For example, utility:info)

string

yes

Sets which icon to use.

iconposition

left, right (Default: left)

string

  

Sets the position of the icon.

imgsrc

  

string

  

Sets the icon image from the image URL.

size

xx-small, x-small, small, medium, large (Default: small)

string

  

Sets the size of the icon.

theme

slds, nds (Default: slds)

string

  

Sets the theme for the icon.

variant

inverse, warning, error , success, light, default (Default: default)

string

  

Changes the appearance of action,custom, standard and utility icons. The inverse variant adds a white fill on a dark background.
## Example c-icon Component ``` ``` ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _Icon Lightning Web Component_ renders an SVG icon. ## Available c-icon Attributes

Attribute

Value

Type

Required

Description

alternative-text

  

string

  

Adds alternative text for the icon. For best practice, if icon is part of a button or is clickable, text should describe what action is taken, such as 'Upload File', and not what the icon is, such as "Paperclip".

baseurl

URL

string

  

Overrides the defined url for the SVG resource.

bg-color

Accepts name, rgb and hex values

string

  

Adds a background color to the icon.

color

Accepts name, rgb and hex values

string

  

Sets the color of the icon.

extraclass

  

string

  

Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

icon-name

(For example, utility:info)

string

yes

Sets which icon to use.

iconposition

left, right (Default: left)

string

  

Sets the position of the icon.

size

xx-small, x-small, small, medium, large (Default: small)

string

  

Sets the size of the icon.

theme

slds, nds (Default: slds)

string

  

Sets the theme for the icon.

variant

inverse, warning, error , success, light, default (Default: default)

string

  

Changes the appearance of action,custom, standard and utility icons. The inverse variant adds a white fill on a dark background.
## Example c-icon Component ``` ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _Icon Lightning Web Component_ renders an SVG icon. ## Available c-icon Attributes

Attribute

Value

Type

Required

Description

icon-name

(For example, utility:info)

string

yes

Sets which icon to use.

theme

slds, nds (Default: slds)

string

  

Sets the theme for the icon.

baseurl

URL

string

  

Overrides the defined url for the SVG resource.

extraclass

  

string

  

Adds a class to the parent of the input element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.

size

xx-small, x-small, small, medium, large (Default: small)

string

  

Sets the size of the icon.

color

Accepts name, rgb and hex values

string

  

Sets the color of the icon.

bg-color

Accepts name, rgb and hex values

string

  

Adds a background color to the icon.

iconposition

left, right (Default: left)

string

  

Sets the position of the icon.

variant

inverse, warning, error , success, light, default (Default: default)

string

  

Changes the appearance of action,custom, standard and utility icons. The inverse variant adds a white fill on a dark background.

alternative-text

  

string

  

Adds alternative text for the icon. For best practice, if icon is part of a button or is clickable, text should describe what action is taken, such as `Upload File', and not what the icon is, such as ``Paperclip''.
## Example c-icon Component ``` ```