Logo

A logo is a visual representation of a brand or app. It can be a word, an image, or a combination of both.

Types

Icon

An icon is an image or symbol that represents a brand or app. It generally does not contain the name of the brand or app.

import React from 'react';

import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';

const Icon = (): React.JSX.Element => {
	return <AtlassianIcon appearance="brand" />;
};

export default Icon;

Lockup

A lockup is the combination of wordmark (the brand or app name) and its icon, generally referred altogether as a logo.

import React from 'react';

import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

const LogoBlue = (): React.JSX.Element => {
	return <AtlassianLogo appearance="brand" />;
};

export default LogoBlue;

Appearance

By default, the lockup and icon inherit their colors from the parent element, however, this can lead to incorrect color combinations. Moving forward, all usages of @atlaskit/logo should use the appearance prop to choose between three brand-approved appearances: brand, neutral, and inverse.

Brand

Brand app logos are used in situations that demand a bold brand presence against a neutral background.

import React from 'react';

import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

const LogoBlue = (): React.JSX.Element => {
	return <AtlassianLogo appearance="brand" />;
};

export default LogoBlue;

Neutral

Neutral app logos can be used when the hierarchy calls for the logo to recede, but should always be evaluated for adequate contrast.

import React from 'react';

import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

const LogoNeutral = (): React.JSX.Element => {
	return <AtlassianLogo appearance="neutral" />;
};

export default LogoNeutral;

Inverse

Inverse app logos should be used to contrast against bold backgrounds.

import React from 'react';

import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

const LogoInverse = (): React.JSX.Element => {
	return <AtlassianLogo appearance="inverse" />;
};

export default LogoInverse;

Size

Xxsmall

The xxsmall size (16px) is the smallest available size.

import React from 'react';

import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';

const LogoXxsmall = (): React.JSX.Element => {
	return <AtlassianIcon size="xxsmall" appearance="brand" />;
};

export default LogoXxsmall;

Xsmall

The xsmall size (20px) can be used in compact UI elements.

import React from 'react';

import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';

const LogoXsmall = (): React.JSX.Element => {
	return <AtlassianIcon size="xsmall" appearance="brand" />;
};

export default LogoXsmall;

Small

The small size (24px) can be used in areas with minimal space or that contain many logos in close proximity. For example, the icon component, the marketing footer, or the emoji picker.

import React from 'react';

import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';

const LogoSmall = (): React.JSX.Element => {
	return <AtlassianIcon size="small" appearance="brand" />;
};

export default LogoSmall;

Medium

The medium size (32px) is the default size.

import React from 'react';

import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

const LogoMedium = (): React.JSX.Element => {
	return <AtlassianLogo size="medium" appearance="brand" />;
};

export default LogoMedium;

Large

The large size (40px) can be used for prominent placements.

import React from 'react';

import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

const LogoLarge = (): React.JSX.Element => {
	return <AtlassianLogo size="large" appearance="brand" />;
};

export default LogoLarge;

Xlarge

The xlarge size (48px) is rarely used. It may be used for a hero piece. For example, Statuspage's login.

import React from 'react';

import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

const LogoXlarge = (): React.JSX.Element => {
	return <AtlassianLogo size="xlarge" appearance="brand" />;
};

export default LogoXlarge;

Company / Program logos

Atlassian

Logo	Icon

import React from 'react';

import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';
import { AtlassianLogo } from '@atlaskit/logo/atlassian/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<AtlassianLogo appearance="brand" />}
		icon={<AtlassianIcon appearance="brand" />}
	/>
);

Atlassian Access

Logo	Icon

import React from 'react';

import { AtlassianAccessIcon } from '@atlaskit/logo/atlassian-access/icon';
import { AtlassianAccessLogo } from '@atlaskit/logo/atlassian-access/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<AtlassianAccessLogo appearance="brand" />}
		icon={<AtlassianAccessIcon appearance="brand" />}
	/>
);

Atlassian Marketplace

Logo	Icon

import React from 'react';

import { AtlassianMarketplaceIcon } from '@atlaskit/logo/atlassian-marketplace/icon';
import { AtlassianMarketplaceLogo } from '@atlaskit/logo/atlassian-marketplace/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<AtlassianMarketplaceLogo appearance="brand" />}
		icon={<AtlassianMarketplaceIcon appearance="brand" />}
	/>
);

App (Product) logos

Home

Logo	Icon

import React from 'react';

import { HomeIcon, HomeLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<HomeLogo appearance="brand" />} icon={<HomeIcon appearance="brand" />} />
);

Hub

Logo	Icon

import React from 'react';

import { HubIcon, HubLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<HubLogo appearance="brand" />} icon={<HubIcon appearance="brand" />} />
);

Confluence

Logo	Icon

import React from 'react';

import { ConfluenceIcon, ConfluenceLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<ConfluenceLogo appearance="brand" />}
		icon={<ConfluenceIcon appearance="brand" />}
	/>
);

Jira

Logo	Icon

import React from 'react';

import { JiraIcon, JiraLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<JiraLogo appearance="brand" />} icon={<JiraIcon appearance="brand" />} />
);

Loom

Loom can be displayed in either blue, or Loom Blurple.

Logo	Icon

import React from 'react';

import { LoomBlurpleIcon, LoomBlurpleLogo, LoomIcon, LoomLogo } from '@atlaskit/logo';
import { Stack } from '@atlaskit/primitives/compiled';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<Stack space="space.100">
		<LogoTable
			logo={[<LoomLogo appearance="brand" />, <LoomBlurpleLogo appearance="brand" />]}
			icon={[<LoomIcon appearance="brand" />, <LoomBlurpleIcon appearance="brand" />]}
		/>
	</Stack>
);

Loom Attribution

Logo	Icon

import React from 'react';

import { LoomAttributionIcon, LoomAttributionLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<LoomAttributionLogo appearance="brand" />}
		icon={<LoomAttributionIcon appearance="brand" />}
	/>
);

Rovo

Logo	Icon

import React from 'react';

import { RovoIcon, RovoLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<RovoLogo appearance="brand" />} icon={<RovoIcon appearance="brand" />} />
);

Align

Align replaces the deprecated Jira Align logo components.

Logo	Icon

import React from 'react';

import { AlignIcon, AlignLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<AlignLogo appearance="brand" />} icon={<AlignIcon appearance="brand" />} />
);

Focus

Logo	Icon

import React from 'react';

import { FocusIcon, FocusLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<FocusLogo appearance="brand" />} icon={<FocusIcon appearance="brand" />} />
);

Talent

Logo	Icon

import React from 'react';

import { TalentIcon, TalentLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<TalentLogo appearance="brand" />} icon={<TalentIcon appearance="brand" />} />
);

Jira Product Discovery

Logo	Icon

import React from 'react';

import { JiraProductDiscoveryIcon, JiraProductDiscoveryLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<JiraProductDiscoveryLogo appearance="brand" />}
		icon={<JiraProductDiscoveryIcon appearance="brand" />}
	/>
);

Feedback

Logo	Icon

import React from 'react';

import { FeedbackIcon, FeedbackLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		icon={<FeedbackIcon appearance="brand" />}
		logo={<FeedbackLogo appearance="brand" />}
	/>
);

Bitbucket

Logo	Icon

import React from 'react';

import { BitbucketIcon, BitbucketLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<BitbucketLogo appearance="brand" />}
		icon={<BitbucketIcon appearance="brand" />}
	/>
);

Compass

Logo	Icon

import React from 'react';

import { CompassIcon, CompassLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<CompassLogo appearance="brand" />} icon={<CompassIcon appearance="brand" />} />
);

Dx

Icon

import React from 'react';

import { DxIcon } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => <LogoTable icon={<DxIcon appearance="brand" />} />;

Rovo Dev

Logo	Icon

import React from 'react';

import { RovoDevIcon, RovoDevLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<RovoDevLogo appearance="brand" />} icon={<RovoDevIcon appearance="brand" />} />
);

Jira Service Management

Logo	Icon

import React from 'react';

import { JiraServiceManagementIcon, JiraServiceManagementLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<JiraServiceManagementLogo appearance="brand" />}
		icon={<JiraServiceManagementIcon appearance="brand" />}
	/>
);

Assets

Logo	Icon

import React from 'react';

import { AssetsIcon, AssetsLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<AssetsLogo appearance="brand" />} icon={<AssetsIcon appearance="brand" />} />
);

Customer Service Management

Logo	Icon

import React from 'react';

import { CustomerServiceManagementIcon, CustomerServiceManagementLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<CustomerServiceManagementLogo appearance="brand" />}
		icon={<CustomerServiceManagementIcon appearance="brand" />}
	/>
);

Opsgenie

Logo	Icon

import React from 'react';

import { OpsgenieIcon, OpsgenieLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<OpsgenieLogo appearance="brand" />}
		icon={<OpsgenieIcon appearance="brand" />}
	/>
);

Statuspage

Logo	Icon

import React from 'react';

import { StatuspageIcon, StatuspageLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<StatuspageLogo appearance="brand" />}
		icon={<StatuspageIcon appearance="brand" />}
	/>
);

Trello

Logo	Icon

import React from 'react';

import { TrelloIcon, TrelloLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<TrelloLogo appearance="brand" />} icon={<TrelloIcon appearance="brand" />} />
);

Admin

Admin replaces the deprecated Atlassian Administration and Atlassian Admin logo components.

Logo	Icon

import React from 'react';

import { AdminIcon, AdminLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<AdminLogo appearance="brand" />} icon={<AdminIcon appearance="brand" />} />
);

Analytics

Analytics replaces the deprecated Atlassian Analytics logo components.

Logo	Icon

import React from 'react';

import { AnalyticsIcon, AnalyticsLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<AnalyticsLogo appearance="brand" />}
		icon={<AnalyticsIcon appearance="brand" />}
	/>
);

Chat

Logo	Icon

import React from 'react';

import { ChatIcon, ChatLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<ChatLogo appearance="brand" />} icon={<ChatIcon appearance="brand" />} />
);

Goals

Logo	Icon

import React from 'react';

import { GoalsIcon, GoalsLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<GoalsLogo appearance="brand" />} icon={<GoalsIcon appearance="brand" />} />
);

Guard

Logo	Icon

import React from 'react';

import { GuardIcon, GuardLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<GuardLogo appearance="brand" />} icon={<GuardIcon appearance="brand" />} />
);

Projects

Logo	Icon

import React from 'react';

import { ProjectsIcon, ProjectsLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<ProjectsLogo appearance="brand" />}
		icon={<ProjectsIcon appearance="brand" />}
	/>
);

Search

Logo	Icon

import React from 'react';

import { SearchIcon, SearchLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<SearchLogo appearance="brand" />} icon={<SearchIcon appearance="brand" />} />
);

Studio

Logo	Icon

import React from 'react';

import { StudioIcon, StudioLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<StudioLogo appearance="brand" />} icon={<StudioIcon appearance="brand" />} />
);

Teams

Logo	Icon

import React from 'react';

import { TeamsIcon, TeamsLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<TeamsLogo appearance="brand" />} icon={<TeamsIcon appearance="brand" />} />
);

Jira Data Center

Logo	Icon

import React from 'react';

import { JiraDataCenterIcon, JiraDataCenterLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<JiraDataCenterLogo appearance="brand" />}
		icon={<JiraDataCenterIcon appearance="brand" />}
	/>
);

Jira Service Management Data Center

Logo	Icon

import React from 'react';

import {
	JiraServiceManagementDataCenterIcon,
	JiraServiceManagementDataCenterLogo,
} from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<JiraServiceManagementDataCenterLogo appearance="brand" />}
		icon={<JiraServiceManagementDataCenterIcon appearance="brand" />}
	/>
);

Confluence Data Center

Logo	Icon

import React from 'react';

import { ConfluenceDataCenterIcon, ConfluenceDataCenterLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<ConfluenceDataCenterLogo appearance="brand" />}
		icon={<ConfluenceDataCenterIcon appearance="brand" />}
	/>
);

Bitbucket Data Center

Logo	Icon

import React from 'react';

import { BitbucketDataCenterIcon, BitbucketDataCenterLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<BitbucketDataCenterLogo appearance="brand" />}
		icon={<BitbucketDataCenterIcon appearance="brand" />}
	/>
);

Bamboo

Logo	Icon

import React from 'react';

import { BambooIcon, BambooLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<BambooLogo appearance="brand" />} icon={<BambooIcon appearance="brand" />} />
);

Crowd

Logo	Icon

import React from 'react';

import { CrowdIcon, CrowdLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable logo={<CrowdLogo appearance="brand" />} icon={<CrowdIcon appearance="brand" />} />
);

Agent logos

Rovo Dev Agent

Logo	Icon

import React from 'react';

import { RovoDevAgentIcon, RovoDevAgentLogo } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable
		logo={<RovoDevAgentLogo appearance="brand" />}
		icon={<RovoDevAgentIcon appearance="brand" />}
	/>
);

Jira Coding Agent

Icon

import React from 'react';

import { JiraCodingAgentIcon } from '@atlaskit/logo';

import LogoTable from '../utils/logo-table';

export default (): React.JSX.Element => (
	<LogoTable icon={<JiraCodingAgentIcon appearance="brand" />} />
);

Was this page helpful?

We use this feedback to improve our documentation.