Custom icon (legacy)

A custom icon is for icons which have a very specific or unique action.

Caution

We are planning on deprecating custom icon. We recommend using either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.

Default

By default, custom icons are displayed in the medium size.

import React from 'react'; import Icon from '@atlaskit/icon'; import type { CustomGlyphProps } from '@atlaskit/icon/types'; const CustomGlyph = (props: CustomGlyphProps) => ( <svg width="24" height="24" viewBox="0 0 24 24" data-testid={props['data-testid']} aria-label={props['aria-label']} // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 className={props.className} > <path fill="currentColor" d="M24 12c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C0 5.372 5.372 0 12 0c6.627 0 12 5.372 12 12zM12 2.92A9.08 9.08 0 002.92 12 9.08 9.08 0 0012 21.08 9.08 9.08 0 0021.081 12 9.08 9.08 0 0012 2.92zm0 16.722A7.64 7.64 0 014.36 12 7.64 7.64 0 0112 4.36 7.64 7.64 0 0119.641 12a7.64 7.64 0 01-7.64 7.641z" /> </svg> ); const CustomIconExample = () => { return <Icon glyph={CustomGlyph} label="" />; }; export default CustomIconExample;

Sizing

Small

The small icon size (16px) is used when space is at a premium, such as search results or inline content.

import React from 'react'; import Icon from '@atlaskit/icon'; import type { CustomGlyphProps } from '@atlaskit/icon/types'; const CustomGlyph = (props: CustomGlyphProps) => ( <svg width="24" height="24" viewBox="0 0 24 24" data-testid={props['data-testid']} aria-label={props['aria-label']} // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 className={props.className} > <path fill="currentColor" d="M24 12c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C0 5.372 5.372 0 12 0c6.627 0 12 5.372 12 12zM12 2.92A9.08 9.08 0 002.92 12 9.08 9.08 0 0012 21.08 9.08 9.08 0 0021.081 12 9.08 9.08 0 0012 2.92zm0 16.722A7.64 7.64 0 014.36 12 7.64 7.64 0 0112 4.36 7.64 7.64 0 0119.641 12a7.64 7.64 0 01-7.64 7.641z" /> </svg> ); const CustomIconExample = () => { return <Icon glyph={CustomGlyph} label="" size="small" />; }; export default CustomIconExample;

Medium

The medium icon size (24px) is used in common interfaces.

import React from 'react'; import Icon from '@atlaskit/icon'; import type { CustomGlyphProps } from '@atlaskit/icon/types'; const CustomGlyph = (props: CustomGlyphProps) => ( <svg width="24" height="24" viewBox="0 0 24 24" data-testid={props['data-testid']} aria-label={props['aria-label']} // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 className={props.className} > <path fill="currentColor" d="M24 12c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C0 5.372 5.372 0 12 0c6.627 0 12 5.372 12 12zM12 2.92A9.08 9.08 0 002.92 12 9.08 9.08 0 0012 21.08 9.08 9.08 0 0021.081 12 9.08 9.08 0 0012 2.92zm0 16.722A7.64 7.64 0 014.36 12 7.64 7.64 0 0112 4.36 7.64 7.64 0 0119.641 12a7.64 7.64 0 01-7.64 7.641z" /> </svg> ); const CustomIconExample = () => { return <Icon glyph={CustomGlyph} label="" size="medium" />; }; export default CustomIconExample;

Large

The large icon size (32px) is used sparingly to emphasize a concept or when there’s a lot of space.

import React from 'react'; import Icon from '@atlaskit/icon'; import type { CustomGlyphProps } from '@atlaskit/icon/types'; const CustomGlyph = (props: CustomGlyphProps) => ( <svg width="24" height="24" viewBox="0 0 24 24" data-testid={props['data-testid']} aria-label={props['aria-label']} // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 className={props.className} > <path fill="currentColor" d="M24 12c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C0 5.372 5.372 0 12 0c6.627 0 12 5.372 12 12zM12 2.92A9.08 9.08 0 002.92 12 9.08 9.08 0 0012 21.08 9.08 9.08 0 0021.081 12 9.08 9.08 0 0012 2.92zm0 16.722A7.64 7.64 0 014.36 12 7.64 7.64 0 0112 4.36 7.64 7.64 0 0119.641 12a7.64 7.64 0 01-7.64 7.641z" /> </svg> ); const CustomIconExample = () => { return <Icon glyph={CustomGlyph} label="" size="large" />; }; export default CustomIconExample;

Color

Primary color

This refers to the main color of the icon. The icon’s primary color inherits the current font color by default.

/** * @jsxRuntime classic * @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766 import { css, jsx } from '@compiled/react'; import { token } from '@atlaskit/tokens'; import Icon from '@atlaskit/icon'; import type { CustomGlyphProps } from '@atlaskit/icon/types'; const containerStyles = css({ color: token('color.icon.warning'), }); const CustomGlyph = (props: CustomGlyphProps) => ( <svg width="24" height="24" viewBox="0 0 24 24" data-testid={props['data-testid']} aria-label={props['aria-label']} // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 className={props.className} > <path fill="currentColor" d="M24 12c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C0 5.372 5.372 0 12 0c6.627 0 12 5.372 12 12zM12 2.92A9.08 9.08 0 002.92 12 9.08 9.08 0 0012 21.08 9.08 9.08 0 0021.081 12 9.08 9.08 0 0012 2.92zm0 16.722A7.64 7.64 0 014.36 12 7.64 7.64 0 0112 4.36 7.64 7.64 0 0119.641 12a7.64 7.64 0 01-7.64 7.641z" /> </svg> ); const CustomIconExample = () => { return ( <div css={containerStyles}> {/* primaryColor is explicitly set */} <Icon glyph={CustomGlyph} label="" primaryColor={token('color.icon.brand')} /> {/* inherited from the color prop of the parent element */} <Icon glyph={CustomGlyph} label="" /> </div> ); }; export default CustomIconExample;

Secondary color

The icon’s secondary color inherits the page background for an icon that supports two colors by default.

/** * @jsxRuntime classic * @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766 import { css, jsx } from '@compiled/react'; import { token } from '@atlaskit/tokens'; import Icon from '@atlaskit/icon'; import type { CustomGlyphProps } from '@atlaskit/icon/types'; const stylesStyles = css({ backgroundColor: token('color.icon.warning'), }); const CustomGlyph = (props: CustomGlyphProps) => ( <svg width="24" height="24" viewBox="0 0 24 24" data-testid={props['data-testid']} aria-label={props['aria-label']} // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 className={props.className} > <path fill="currentColor" d="M24 12c0 6.627-5.373 12-12 12-6.628 0-12-5.373-12-12C0 5.372 5.372 0 12 0c6.627 0 12 5.372 12 12zM12 2.92A9.08 9.08 0 002.92 12 9.08 9.08 0 0012 21.08 9.08 9.08 0 0021.081 12 9.08 9.08 0 0012 2.92zm0 16.722A7.64 7.64 0 014.36 12 7.64 7.64 0 0112 4.36 7.64 7.64 0 0119.641 12a7.64 7.64 0 01-7.64 7.641z" /> </svg> ); const CustomIconExample = () => { return ( <div css={stylesStyles}> {/* primaryColor is explicitly set */} <Icon glyph={CustomGlyph} label="" secondaryColor={token('color.icon.brand')} /> {/* inherited from the color prop of the parent element */} <Icon glyph={CustomGlyph} label="" /> </div> ); }; export default CustomIconExample;
Was this page helpful?
We use this feedback to improve our documentation.