Skip to main content

Social Icon

Use Social Icon to add linked social or brand icons, with optional text labels and official or custom colors.

How It Works In Atomicat​

The drawer manages a list of icon items. Each item can be reordered, cloned, deleted, and edited. You can choose an icon from the library, enter a link, enable new-tab behavior, enable text and add a social name, and choose icon type: official color or custom icon. Custom icon mode exposes icon color and background color controls.

When To Use It​

  • Link to social profiles in a header, footer, bio section, or proof area.
  • Show a row of brand channels without building individual icon blocks.
  • Add text labels when icons alone may be unclear.
  • Use official colors for recognizable networks or custom colors for brand consistency.

Configure The Element​

  • Add one item per social destination.
  • Select the correct library icon and enter the destination URL.
  • Enable new tab for external social links.
  • Enable text when visitors need a label beside the icon.
  • Use custom color only when official colors conflict with the page design.

Testing Notes​

  • Click each icon on the published page.
  • Check spacing and tap targets on mobile.
  • Verify official colors still meet contrast needs on the chosen background.

Limitations And Tips​

  • Social Icon is for outbound links, not a sharing widget with platform APIs.
  • Do not use unlabeled icons if the audience may not recognize the brand.
  • Too many social links can distract from the primary CTA.

FAQ​

Can icons open in a new tab?

Yes. New-tab behavior appears after a link is added.

Can I add text beside an icon?

Yes. Enable Text and enter the social name.

What is official color mode?

It uses the icon's expected brand color styling instead of custom colors.