Custom components (Alpha)

Icon (Alpha)

4min


The icon component can be integrated into custom components to enhance their visual appeal and functionality, such as adding an icon within a Button (Alpha) , displaying it in a Card (Alpha) , or embedding it in a View (Alpha) . By customizing an icon, you can adjust its size, color, and shape, and even apply animations or conditional styling, ensuring seamless alignment with your application's design system and user experience.

For steps on creating a custom component, see How to create a custom component.

Configuration options

You can use when and instanceId with component.icon, add the properties before the options: property. The available list of options is shown below. For the full list of properties, see jc-icon .

Options

value

color

Multiple, use IntelliSense to view the available list.

emphasis

Changing the color, for example, brighter, bolder, or a contrasting hue. extra-low high low low-medium medium

onPress

Multiple, use IntelliSense to view the list of available actions to call. The action is called when the icon is pressed.

shape

Determine the shape around the icon. circle rounded (default) square

size

Enter a number value or use an expression to determine the size of the icon.

type

Configure the icon's display as a standalone icon, within a shape, or in a duotone style. The following options are available: basic (default) duotone contained

Examples and code snippets



This example shows the component.icon with different icon sizes using the size: property in a Card (Alpha). Examples:

  1. See the section component example in GitHub.
  2. See the custom component example in GitHub.
  3. See the jig example in GitHub.
Icon sizes
Icon sizes

icon-sizes.jigx
icons-sizes.jigx

Icons shapes
Icon shapes


These examples demonstrate the various options for using icons with rounded, square and circled shapes in a Card (Alpha). By combining the shape, type, and size properties, you can achieve the desired appearance. Examples:

  1. See the custom components example in GitHub for icons-1.0.jigx to icons-3.5.jigx.
  2. See the jig example in GitHub.
  3. See the section component example in GitHub.
icon-1.0.jigx
icons-rounded.jigx


Create an icon bar within in a component.card by configuring multiple component.icon. Add an onPress event to each icon that opens its associated URL. You can configure the onPress event to call various available actions.

Example:

  1. See the custom component example in GitHub.
  2. See the jig example in GitHub.



Icon bar
Icon bar

icons.jigx
icons-bar.jigx




Updated 05 Mar 2025
Doc contributor
Did this page help you?