Social Icon

The Social Icon Strip is a configurable row of social media platform icons that link to external URLs.

Skill Level: Beginner

Before You Begin

• Know about Screens and Components, and Actions.

• Have a screen ready in the Adalo Builder where you want to place social media links.

Overview

The Social Icon Strip is a configurable row of social media platform icons that link to external URLs. It's a presentation-driven component — it displays icons and triggers actions when tapped. It does not connect to collections or store data.

Its purpose is simple: keep your layout clean while giving you controlled, flexible social linking.

Supported platforms out of the box: Facebook, Instagram, X (Twitter), LinkedIn, YouTube, TikTok, Pinterest, Snapchat, WhatsApp, Telegram, Email, and Website.

Each icon slot can be set to a pre-built platform (with automatic brand-color icons) or switched to Custom mode, which supports a Material icon, an uploaded image, or any Font Awesome icon by name.

---

What's Included

The component ships with two sub-components:

• Social Icons Strip — Displays up to 10 icons in a horizontal row with shared sizing, spacing, and alignment controls. Icon 1 is always visible. Icons 2 through 10 each have an Enabled toggle.

• Social Icon — A standalone single social icon with the same platform selection and customization options.

Social Icons Strip A unified horizontal container that displays up to 10 social media icons with shared layout and styling controls. Icon 1 is always visible. Icons 2–10 can be enabled or disabled individually.

All icons inside a Strip share layout controls: Alignment, Container Padding, Icon Size, and Icon Spacing. These shared controls ensure consistent spacing and predictable scaling across the row.

At the same time, each icon slot is independently configurable. Each icon includes its own Platform selection, Brand color toggle, Custom icon support, Link field, and Click Action.

Social Icons Strip

Social Icon (Standalone) A single independent icon with its own size control that can be placed anywhere on the screen.

Use the standalone version when you need different icon sizes, vertical layouts, custom spacing, or more layout flexibility.

Social Icon (Standalone)

Layout is shared. Configuration is per icon. That distinction is intentional.

---

When to Use Standalone vs. Strip

Use Case	Recommended
Horizontal row of social links (e.g., footer)	Strip
Icons at different sizes on the same screen	Standalone
Vertical or non-linear layout	Standalone
Consistent row with uniform spacing	Strip
Single social link in a card or header	Standalone

---

Known Limitations and Gotchas

• Maximum 10 icons — The strip supports up to 10 icon slots. If a user needs more, they would need to place multiple strip instances side by side.

• Icon 1 cannot be disabled — Icon 1 is always visible. There is no Enabled toggle for it. Only Icons 2 through 10 have the toggle.

• "Hide icons if no link" only works at runtime — When this toggle is ON, icons without links are still visible in the Adalo editor so the builder can configure them. They only hide in the published or preview app.

• Font Awesome icon names must be exact — For Custom then Font Awesome, the icon name must match exactly what is on fontawesome.com (free collection only). If the name is wrong, a question mark placeholder renders. Common mistake: including the fa- prefix. Users should omit it (use github not fa-github).

• Font Awesome only includes free icons — The component bundles Font Awesome Free (solid and brands). Pro or paid icons are not available. If a user enters a pro-only icon name, it will show the question mark fallback.

---

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!

Do you have a tutorial or help doc request? Let us know!