> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create social icons and banners

> From your site and Drive, generate profile icons and cover banners for every network, in the right size.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

From your website and brand files in Google Drive, generate profile icons and cover banners
for X, LinkedIn, Instagram, Facebook, TikTok, and other networks you name. Agent uses each
platform's current sizes and safe areas so faces, logos, and text are not cropped in the
live profile. Keep one visual system and export PNG. If a network needs a different crop,
make a dedicated artboard, don't stretch.

## Best for

* Brand designers who need profile and cover assets across networks at once.
* Marketers who need export-ready icons and banners from an existing logo and site.

## Connectors

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logo, colors, and existing brand assets",
},
]}
/>

## Before you start

Have the site URL and a logo (or brand folder) in Drive. Say which networks you need. If
the logo is a wordmark, say whether the icon should be a mark, a letterform, or both.

## Prompt the agent

<AiPrompt>
  From this website \[URL] and brand files in Google Drive, create a social kit
  in Replit Design: profile icons and cover banners for X, LinkedIn, Instagram,
  Facebook, and TikTok. Use each network's current official sizes and safe areas
  so faces, logos, and text are not cropped. Keep one visual system. Export PNG.
  If a network needs a different crop, make a dedicated artboard, don't stretch.
</AiPrompt>

## What to expect

Agent reads the site and Drive assets, then builds one artboard per asset with the right
pixel size. Typical set:

* **X:** 400×400 profile, 1500×500 header
* **LinkedIn:** 400×400 profile, 1584×396 banner
* **Instagram:** 320×320 profile (plus 1080×1080 and 1080×1920 if you want post and story covers)
* **Facebook:** 320×320 profile, 820×312 cover (or 1640×624 at 2×)
* **TikTok:** 200×200 profile, 1080×1920 cover

Review crops on a round profile and on a wide banner before you upload. Export one icon
and one banner, drop them on a round avatar and a wide header, and check padding at a
small size.

## Make it work for you

<AiPrompt>
  Add YouTube (800×800 profile, 2560×1440 banner with the 1546×423 safe area)
  and Pinterest (165×165 profile, 1000×1500 pins).
</AiPrompt>

<AiPrompt>
  Make light and dark versions of every icon. Keep the banners on the site's
  primary color.
</AiPrompt>

## Troubleshooting

* **Logos or faces are cropped:** review each asset on a round profile and a wide banner. Ask Agent to respect safe areas and to make a dedicated artboard for a different crop. Don't stretch.
* **Sizes don't match the network:** name the networks you need and ask Agent to use each one's current official sizes. Recheck before you upload; networks change these.

## Related

<CardGroup cols={2}>
  <Card title="Design a landing page" href="/use-cases/design-landing-page">
    Same Google Drive brand files for a waitlist or launch page.
  </Card>

  <Card title="Build an investor pitch deck" href="/use-cases/pitch-deck-from-website">
    Same Google Drive brand files for slides.
  </Card>
</CardGroup>