Brand Icon

The Brand Icon component renders a visual representation of the primary products within the Adjust Suite. Each icon encapsulates the unique identity of its corresponding main product, ensuring recognizable design language across the suite.

Example

Live Editor

<BrandIcon type="datascape" />

<BrandIcon type="datascape" />

Result

Loading...

Variants

Type

Live Editor

<div style={{ display: 'flex', gap: '25px' }}> <BrandIcon type="appview" /> <BrandIcon type="campaign_lab" /> <BrandIcon type="datascape" /> <BrandIcon type="dataworks" /> <BrandIcon type="pulse" /> <BrandIcon type="action_center" /> <BrandIcon type="protection" /> <BrandIcon type="homeview" /> <BrandIcon type="insight" /> </div>

<div style={{ display: 'flex', gap: '25px' }}>
  <BrandIcon type="appview" />
  <BrandIcon type="campaign_lab" />
  <BrandIcon type="datascape" />
  <BrandIcon type="dataworks" />
  <BrandIcon type="pulse" />
  <BrandIcon type="action_center" />
  <BrandIcon type="protection" />
  <BrandIcon type="homeview" />
  <BrandIcon type="insight" />
</div>

Result

Loading...

Size

Use the size prop to change the width and height of the icon, the default value is 32.

Live Editor

<div style={{ display: 'flex', gap: '25px' }}> <BrandIcon type="appview" /> <BrandIcon type="appview" size={64} /> </div>

<div style={{ display: 'flex', gap: '25px' }}>
  <BrandIcon type="appview" />
  <BrandIcon type="appview" size={64} />
</div>

Result

Loading...

Props

Name	Type	Default
type * Type of Icon	"datascape" | "pulse" | "campaign_lab" | "dataworks" | "action_center" | "protection" | "appview" | "homeview" | "insight"	—
size Size of Icon, default is 32.	number	32
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.