---
name: Assets
route: /components/common/assets
edit: false
---

import { Playground, Props } from 'docz';
import {
  Avatar,
  AvatarPlaceholder,
  BrandEspresso,
  BrandEspressoWeb,
  GraphicAudioChicago,
  GraphicAudioLondon,
  GraphicNewsletterChicago,
  GroupLogo,
  GroupLogoMasthead,
  GroupWordmark,
  IconCheck,
  IconCopy,
  Logo,
  MonogramCircle,
  MonogramSquare,
  SocialIconFacebook,
  SocialIconInstagram,
  SocialIconTwitter,
  SocialIconThreads,
  SocialIconTikTok,
  SocialIconLinkedIn,
  SocialIconYoutube,
  SocialIconRss,
  SocialIconWhatsApp,
  Wordmark,
  Wordmark1843,
  WorldAheadWordmark,
} from './assets.js';

# Assets

<hr />

## Avatar

### Description

Use the white-on-red monogram for the primary brand and all sub-brands.
Use the secondary, red-on-white monogram for The Economist Group only.

**The Economist**

<Playground>
  <Avatar />
</Playground>

**The Economist Group**

<Playground
  style={{
    display: 'flex',
    backgroundColor: '#e3120b',
    margin: '-2em',
    padding: '2em',
  }}
>
  <Avatar secondary />
</Playground>

**Placeholder**

<Playground>
  <AvatarPlaceholder />
</Playground>

## Brands

<Playground>
  <BrandEspresso />
  <BrandEspressoWeb />
</Playground>

## Group logo

### Description

The Economist Group master logo.

<Playground>
  <GroupLogo />
</Playground>

## Group logo (masthead)

### Description

The Economist Group master logo for use with the masthead.

<Playground>
  <GroupLogoMasthead />
</Playground>

## Graphics

<Playground
  style={{
    display: 'flex',
    backgroundColor: '#ccc',
    margin: '-2em',
    padding: '2em',
  }}
>
  <GraphicAudioChicago />
  <GraphicAudioLondon />
  <GraphicNewsletterChicago />
</Playground>

## Group wordmark

### Description

The Economist Group wordmark.

<Playground>
  <GroupWordmark />
</Playground>

## Logo

### Description

The Economist master logo. At very small sizes where readability is compromised, consider using the monogram.

<Playground>
  <Logo />
</Playground>

<hr />

## Monogram

### Description

The Economist monogram. For use in social media and app icons.

**Circle**

<Playground>
  <MonogramCircle />
</Playground>

**Circle (inverse)**

<Playground
  style={{
    display: 'flex',
    backgroundColor: '#e3120b',
    margin: '-2em',
    padding: '2em',
  }}
>
  <MonogramCircle inverse />
</Playground>

**Square**

<Playground>
  <MonogramSquare />
</Playground>

**Square (inverse)**

<Playground
  style={{
    display: 'flex',
    backgroundColor: '#e3120b',
    margin: '-2em',
    padding: '2em',
  }}
>
  <MonogramSquare inverse />
</Playground>

<hr />

## Icons

**Copy**

<Playground>
  <IconCopy />
</Playground>

**Check**

<Playground>
  <IconCheck />
</Playground>

<hr />

## Social Icons

**Facebook**

<Playground>
  <SocialIconFacebook />
</Playground>

**Instagram**

<Playground>
  <SocialIconInstagram />
</Playground>

**LinkedIn**

<Playground>
  <SocialIconLinkedIn />
</Playground>

**RSS**

<Playground>
  <SocialIconRss />
</Playground>

**X (Twitter)**

<Playground>
  <SocialIconTwitter />
</Playground>

**TikTok**

<Playground>
  <SocialIconTikTok />
</Playground>

**Threads**

<Playground>
  <SocialIconThreads />
</Playground>

**WhatsApp**

<Playground>
  <SocialIconWhatsApp />
</Playground>

**YouTube**

<Playground>
  <SocialIconYoutube />
</Playground>

## Wordmark

### Description

For exceptional cases where it would be difficult to use the master logo, or specific product
journeys outside of the primary customer experience.

<Playground>
  <Wordmark />
</Playground>

## Wordmark (inverse)

### Description

The Economist master logo. Use only on a red background.

<Playground
  style={{
    display: 'flex',
    backgroundColor: '#e3120b',
    margin: '-2em',
    padding: '2em',
  }}
>
  <Wordmark inverse />
</Playground>

**Wordmark1843**

<Playground>
  <Wordmark1843 />
</Playground>

**WorldAheadWordmark**

<Playground>
  <WorldAheadWordmark />
</Playground>