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
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;