App Icon

Shows an application icon. If the icon is not available, for instance for technical reasons, a placeholder is shown that is defined based on the applicaton name.

Example

Live Editor

<AppIcon appId="com.adjust.insights" appName="adjust Insights" />

<AppIcon appId="com.adjust.insights" appName="adjust Insights" />

Result

Loading...

Variants

Local App Icons

We have local App Icons in Atlas that can be accessed by passing the appId:

Live Editor

<div style={{display: 'flex', justifyContent: 'space-between'}}> <AppIcon appId="com.adjust-demo.leardroid" appName="Education - Learn Droid" /> <AppIcon appId="com.adjust-demo.cryptoharvest" appName="Finance - Crypto Harvest" /> <AppIcon appId="com.adjust-demo.pocketbanking" appName="Finance - Pocket Banking" /> <AppIcon appId="com.adjust-demo.sportylabs" appName="Fitness - Sporty Labs" /> <AppIcon appId="com.adjust-demo.candyalley" appName="Gaming - Candy Alley" /> <AppIcon appId="com.adjust-demo.hypercombat" appName="Gaming - Hyper Combat" /> <AppIcon appId="com.adjust-demo.amazingmarket" appName="Shopping - Amazing Market" /> <AppIcon appId="com.adjust-demo.flashgroceries" appName="Shopping - Flash Groceries" /> <AppIcon appId="com.adjust-demo.wordknock" appName="Gaming - Word knock" /> <AppIcon appId="ctv1234561" appName="Streaming - Net Watching" /> <AppIcon appId="ctv1234562" appName="Streaming - Everything+" /> <AppIcon appId="com.tripexplorer.app" appName="Travel Trip Explorer" /> </div>

<div style={{display: 'flex', justifyContent: 'space-between'}}>
  <AppIcon appId="com.adjust-demo.leardroid" appName="Education - Learn Droid" />
  <AppIcon appId="com.adjust-demo.cryptoharvest" appName="Finance - Crypto Harvest" />
  <AppIcon appId="com.adjust-demo.pocketbanking" appName="Finance - Pocket Banking" />
  <AppIcon appId="com.adjust-demo.sportylabs" appName="Fitness - Sporty Labs" />
  <AppIcon appId="com.adjust-demo.candyalley" appName="Gaming - Candy Alley" />
  <AppIcon appId="com.adjust-demo.hypercombat" appName="Gaming - Hyper Combat" />
  <AppIcon appId="com.adjust-demo.amazingmarket" appName="Shopping - Amazing Market" />
  <AppIcon appId="com.adjust-demo.flashgroceries" appName="Shopping - Flash Groceries" />
  <AppIcon appId="com.adjust-demo.wordknock" appName="Gaming - Word knock" />
  <AppIcon appId="ctv1234561" appName="Streaming - Net Watching" />
  <AppIcon appId="ctv1234562" appName="Streaming - Everything+" />
  <AppIcon appId="com.tripexplorer.app" appName="Travel Trip Explorer" />
</div>

Result

Loading...

Size

The AppIcon is available in three sizes: small, medium, and large.

Live Editor

<> <AppIcon appId="com.adjust.insights" appName="adjust Insights" size="small" /> <AppIcon appId="com.adjust.insights" appName="adjust Insights" size="medium" /> <AppIcon appId="com.adjust.insights" appName="adjust Insights" size="large" /> </>

<>
  <AppIcon appId="com.adjust.insights" appName="adjust Insights" size="small" />
  <AppIcon
    appId="com.adjust.insights"
    appName="adjust Insights"
    size="medium"
  />
  <AppIcon appId="com.adjust.insights" appName="adjust Insights" size="large" />
</>

Result

Loading...

Props

Name	Type	Default
appName * The appName will be used as a placeholder in case the app icon is not available	string	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
appId An app id in either Android's namespace format (e.g. "com.adjust.insights") or in iOS' number format (e.g. "1125517808")	string	—
size Size of the icon	"small" | "medium" | "large"	"medium"
customQueryClient custom queryClient for query hook	QueryClient	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.