An icon is an image or symbol that represents a brand or product. It generally does not contain the
name of the brand or product.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianIcon } from '@atlaskit/logo';
const Icon = () => {
return <AtlassianIcon appearance="brand" />;
};
export default Icon;
A lockup is the combination of wordmark (the brand or product name) and its icon, generally referred
altogether as a logo.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianLogo } from '@atlaskit/logo';
const LogoBlue = () => {
return <AtlassianLogo appearance="brand" />;
};
export default LogoBlue;
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 product logos are used in situations that demand a bold brand presence against a neutral
background.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianLogo } from '@atlaskit/logo';
const LogoBlue = () => {
return <AtlassianLogo appearance="brand" />;
};
export default LogoBlue;
Neutral product logos can be used when the hierarchy calls for the logo to recede, but should always
be evaluated for adequate contrast.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianLogo } from '@atlaskit/logo';
const LogoNeutral = () => {
return <AtlassianLogo appearance="neutral" />;
};
export default LogoNeutral;
Inverse product logos should be used to contrast against bold backgrounds.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianLogo } from '@atlaskit/logo';
const LogoInverse = () => {
return <AtlassianLogo appearance="inverse" />;
};
export default LogoInverse;
Use the small logo 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.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianIcon } from '@atlaskit/logo';
const LogoSmall = () => {
return <AtlassianIcon size="small" appearance="brand" />;
};
export default LogoSmall;
The medium size (32px) is the default size.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianLogo } from '@atlaskit/logo';
const LogoMedium = () => {
return <AtlassianLogo size="medium" appearance="brand" />;
};
export default LogoMedium;
The large size (56px) is rarely used. It may be used for a hero piece. For example, Statuspage's
login.
Copy code Edit in code sandbox (opens in a new window) import React from 'react';
import { AtlassianLogo } from '@atlaskit/logo';
const LogoLarge = () => {
return <AtlassianLogo size="large" appearance="brand" />;
};
export default LogoLarge;
Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::13d14f648e6fb34410506f1f7127708a>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AtlassianIcon, AtlassianLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAtlassian = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AtlassianLogo appearance="brand" />
</td>
<td>
<AtlassianIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAtlassian;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::e079bd6bc1ee154eb02f4cd84354f94e>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AtlasIcon, AtlasLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAtlas = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AtlasLogo appearance="brand" />
</td>
<td>
<AtlasIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAtlas;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::6d95fe8a46993fdcd3ddcd7ce3a9493d>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AtlassianAccessIcon, AtlassianAccessLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAtlassianAccess = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AtlassianAccessLogo appearance="brand" />
</td>
<td>
<AtlassianAccessIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAtlassianAccess;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::1a14847f1c7cdbaa1b9ae0c1b370a545>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AtlassianAdminIcon, AtlassianAdminLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAtlassianAdmin = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AtlassianAdminLogo appearance="brand" />
</td>
<td>
<AtlassianAdminIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAtlassianAdmin;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::2a6dc40b7d5ddeb44c6266627cc46222>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AtlassianAdministrationIcon, AtlassianAdministrationLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAtlassianAdministration = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AtlassianAdministrationLogo appearance="brand" />
</td>
<td>
<AtlassianAdministrationIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAtlassianAdministration;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::749b3a5451aa46e9fbc43cb5ac14f08b>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AtlassianAnalyticsIcon, AtlassianAnalyticsLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAtlassianAnalytics = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AtlassianAnalyticsLogo appearance="brand" />
</td>
<td>
<AtlassianAnalyticsIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAtlassianAnalytics;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::710d5977abe4fb1e373acba1f8547472>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AtlassianMarketplaceIcon, AtlassianMarketplaceLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAtlassianMarketplace = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AtlassianMarketplaceLogo appearance="brand" />
</td>
<td>
<AtlassianMarketplaceIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAtlassianMarketplace;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::ae8de624ad2f065a2ccd88c3cac63811>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { BitbucketIcon, BitbucketLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoBitbucket = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<BitbucketLogo appearance="brand" />
</td>
<td>
<BitbucketIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoBitbucket;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::abc3c9081c1a83ba411081fc2dd5e383>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { CompassIcon, CompassLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoCompass = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<CompassLogo appearance="brand" />
</td>
<td>
<CompassIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoCompass;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::603cd26fdb6f3b0d65bfc7e30f4e98b1>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { ConfluenceIcon, ConfluenceLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoConfluence = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<ConfluenceLogo appearance="brand" />
</td>
<td>
<ConfluenceIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoConfluence;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::147da515928b5a66fc8b529009f023a5>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { FocusIcon, FocusLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoFocus = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<FocusLogo appearance="brand" />
</td>
<td>
<FocusIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoFocus;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::6e2bb757a6f01680355490531fd6d7de>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { GuardIcon, GuardLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoGuard = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<GuardLogo appearance="brand" />
</td>
<td>
<GuardIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoGuard;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::8f9fd53e2d2c5e4ee145bcdb4df30dd5>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { JiraIcon, JiraLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoJira = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<JiraLogo appearance="brand" />
</td>
<td>
<JiraIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoJira;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::c2dfacd53129bb3ac86d0ce7a66510d1>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { JiraAlignIcon, JiraAlignLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoJiraAlign = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<JiraAlignLogo appearance="brand" />
</td>
<td>
<JiraAlignIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoJiraAlign;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::d353e7f0d2cb4205f8cca4fa05344a84>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { JiraProductDiscoveryIcon, JiraProductDiscoveryLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoJiraProductDiscovery = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<JiraProductDiscoveryLogo appearance="brand" />
</td>
<td>
<JiraProductDiscoveryIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoJiraProductDiscovery;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::0f6fd4d6cbccbddccdb9adfa9fd747b2>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { JiraServiceManagementIcon, JiraServiceManagementLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoJiraServiceManagement = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<JiraServiceManagementLogo appearance="brand" />
</td>
<td>
<JiraServiceManagementIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoJiraServiceManagement;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::2d4e26fdd3062780afba74e63cb14eb6>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { JiraSoftwareIcon, JiraSoftwareLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoJiraSoftware = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<JiraSoftwareLogo appearance="brand" />
</td>
<td>
<JiraSoftwareIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoJiraSoftware;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::52535ac823c0f7fb7319e09cd457e7af>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { JiraWorkManagementIcon, JiraWorkManagementLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoJiraWorkManagement = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<JiraWorkManagementLogo appearance="brand" />
</td>
<td>
<JiraWorkManagementIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoJiraWorkManagement;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::4d23321350c600146a52e1f93cf148b6>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { LoomIcon, LoomLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoLoom = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<LoomLogo appearance="brand" />
</td>
<td>
<LoomIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoLoom;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::a7374926189f4c9f528b40edf2487bb6>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { LoomAttributionIcon, LoomAttributionLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoLoomAttribution = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<LoomAttributionLogo appearance="brand" />
</td>
<td>
<LoomAttributionIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoLoomAttribution;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::1f3cf226498d168a1ba127fb86f0342f>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { OpsgenieIcon, OpsgenieLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoOpsgenie = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<OpsgenieLogo appearance="brand" />
</td>
<td>
<OpsgenieIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoOpsgenie;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::5b89f9efabc0a7bee702a69ed46416c5>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { RovoIcon, RovoLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoRovo = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<RovoLogo appearance="brand" />
</td>
<td>
<RovoIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoRovo;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::bcfd429aa42c3014898ab46ce935cb1d>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { StatuspageIcon, StatuspageLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoStatuspage = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<StatuspageLogo appearance="brand" />
</td>
<td>
<StatuspageIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoStatuspage;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::4b97f6afd14a14a17e2739feb00fbc49>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { TrelloIcon, TrelloLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoTrello = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<TrelloLogo appearance="brand" />
</td>
<td>
<TrelloIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoTrello;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::d685484c57686c9953676685cd4f3563>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { AssetsIcon, AssetsLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoAssets = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<AssetsLogo appearance="brand" />
</td>
<td>
<AssetsIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoAssets;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::a70f0a15a0234fe8785eb91121671e55>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { ChatIcon, ChatLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoChat = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<ChatLogo appearance="brand" />
</td>
<td>
<ChatIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoChat;
Show more Customer Service Management Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::273908cd135ebdeb0d030c1d9935763b>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { CustomerServiceManagementIcon, CustomerServiceManagementLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoCustomerServiceManagement = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<CustomerServiceManagementLogo appearance="brand" />
</td>
<td>
<CustomerServiceManagementIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoCustomerServiceManagement;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::918eaea503dbea77186420a984242a77>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { GoalsIcon, GoalsLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoGoals = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<GoalsLogo appearance="brand" />
</td>
<td>
<GoalsIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoGoals;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::f6ae4e0bbd6a3e54b689e88bf007e2fb>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { HomeIcon, HomeLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoHome = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<HomeLogo appearance="brand" />
</td>
<td>
<HomeIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoHome;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::5695cbe023586d7e6a90a35d986e6fc6>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { HubIcon, HubLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoHub = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<HubLogo appearance="brand" />
</td>
<td>
<HubIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoHub;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::db921c12c79abcc3b51c3764a69bde97>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { ProjectsIcon, ProjectsLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoProjects = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<ProjectsLogo appearance="brand" />
</td>
<td>
<ProjectsIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoProjects;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::0a0b6a8ad3350d0847e9842ffb938224>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { SearchIcon, SearchLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoSearch = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<SearchLogo appearance="brand" />
</td>
<td>
<SearchIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoSearch;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::10568e98d6fe8da8b807542c4d2dfccd>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { StudioIcon, StudioLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoStudio = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<StudioLogo appearance="brand" />
</td>
<td>
<StudioIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoStudio;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::4c1fc15a175b7cde12064b80f5b344f7>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { TalentIcon, TalentLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoTalent = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<TalentLogo appearance="brand" />
</td>
<td>
<TalentIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoTalent;
Show more Copy code Edit in code sandbox (opens in a new window) /**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::6c1f76ef2d0e0727516ba48d3657444e>>
* @codegenCommand yarn workspace @atlaskit/logo generate:examples
*/
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { css, jsx } from '@compiled/react';
import { TeamsIcon, TeamsLogo } from '@atlaskit/logo';
const tableStyle = css({
width: '415px',
});
const LogoTeams = () => {
return (
<div>
<table>
<thead>
<tr>
<th>Logo</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<tr>
<td css={tableStyle}>
<TeamsLogo appearance="brand" />
</td>
<td>
<TeamsIcon appearance="brand" />
</td>
</tr>
</tbody>
</table>
</div>
);
};
export default LogoTeams;
Show more