Icon tile

An icon with background, color and size determined by the Tile component.

Icon tile places an icon on a background of a specified size and color. It allows icons to be prominently highlighted in a layout, such as next to a heading.

Size

Unlike standard icons, icons inside Icon Tiles can scale up and down for use in different layouts.

All available sizes:

xsmall (20px)
small (24px)
medium (32px) – default
large (40px)
xlarge (48px)

import React from 'react';

import GlobeIcon from '@atlaskit/icon/core/globe';
import IconTile from '@atlaskit/icon/icon-tile';
import type { IconTileProps } from '@atlaskit/icon/types';
import { Inline, Stack } from '@atlaskit/primitives/compiled';

const sizes: IconTileProps['size'][] = ['xsmall', 'small', 'medium', 'large', 'xlarge'];

const IconSizeExample = (): React.JSX.Element => {
	return (
		<Stack space="space.200">
			<Inline space="space.200" shouldWrap={true} alignBlock="end">
				{sizes.map((size) => (
					<IconTile key={size} icon={GlobeIcon} label="" appearance="purple" size={size} />
				))}
			</Inline>
		</Stack>
	);
};

export default IconSizeExample;

Appearance

Appearance options exist for each hue of available accent token, including bold variants that provide more contrast.

import React from 'react';

import GlobeIcon from '@atlaskit/icon/core/globe';
import IconTile from '@atlaskit/icon/icon-tile';
import type { IconTileProps } from '@atlaskit/icon/types';
import { Inline, Stack } from '@atlaskit/primitives/compiled';

const appearances: IconTileProps['appearance'][] = [
	'gray',
	'red',
	'orange',
	'yellow',
	'lime',
	'green',
	'teal',
	'blue',
	'purple',
	'magenta',
];

const boldAppearances: IconTileProps['appearance'][] = [
	'grayBold',
	'redBold',
	'orangeBold',
	'yellowBold',
	'limeBold',
	'greenBold',
	'tealBold',
	'blueBold',
	'purpleBold',
	'magentaBold',
];

const IconSizeExample = (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			{[appearances, boldAppearances].map((appearance) => (
				<Inline space="space.200" shouldWrap={true}>
					{appearance.map((appearance) => (
						<IconTile
							key={appearance}
							icon={GlobeIcon}
							label=""
							appearance={appearance}
							size="medium"
						/>
					))}
				</Inline>
			))}
		</Stack>
	);
};

export default IconSizeExample;

Was this page helpful?

We use this feedback to improve our documentation.