Skip to main content

Add a Badge to Your App Icon

With Appcircle's Add Badge to Your App Icon component, you can add badges and version information to your app icon, which you can also customize. This helps testers easily identify the version they are testing directly on the application icon.

Original ImageModified Image


Below is a list of workflow steps that need to be executed before this step, along with their respective reasons.

Prerequisite Workflow StepDescription
Git CloneThe repository needs to be cloned to begin the badge-adding process. After this step, the variable AC_REPOSITORY_DIR will be set.

If you are using the Increment Build and Version Number component in your workflow and you want to print the current version information on the icon, this step should be used before the Add Badge to Your App Icon component.

Input Variables

Below is a list of input variables that can be used with this component with a description of each.

Variable NameDescriptionStatus
$AC_ICONS_PATHSpecifies the path of icon files. For example: MyProject/Assets.xcassets/AppIcon.appiconset. The glob pattern can be used to select multiple image paths, for example, app/src/main/res/mipmap* to add badges to all PNGs under mipmap in this file path.Required
$AC_BADGE_TEXTThe text to appear in the badge on the top right corner.Optional
$AC_BADGE_VERSIONThe version or build number to display at the bottom of the badge.Optional
$AC_BADGE_BGCOLORYou can specify a full color name (e.g., orange), hex codes (e.g., #FFA500), or RGB values (e.g., rgb(255,165,0)).Optional
$AC_BADGE_TEXTCOLORYou can specify a full color name (e.g., white), hex codes (e.g., #FFFFFF), or RGB values (e.g., rgb(255,255,255)).Optional

To use this component, you must provide the icon path from your project file. Here are some sample path usages:

  • iOS Native: MyProject/Assets.xcassets/AppIcon.appiconset
  • Android Native app/src/main/res/
  • React Native iOS: ios//MyProject/Assets.xcassets/AppIcon.appiconset/
  • React Native Android: android/app/src/main/res/
  • Flutter iOS: ios/Runner/Assets.xcassets/AppIcon.appiconset
  • Flutter Android: android/app/src/main/res/

Note: The glob pattern can be used to select multiple image paths. For example: app/src/main/res/mipmap* adds badges to all pngs under the mipmap in this file path.

For the source code of this component, visit:

Preview of GitHub - appcircleio/appcircle-badge-component