# Social Icon

*Skill Level: Beginner*

### Before You Begin

* Know about [Screens and Components](https://help.adalo.com/component-basics), and [Actions](https://help.adalo.com/action-basics/action-basics).
* 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.

{% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/VS4w2OU0Y3VR2C5lNwmZ" %}
[Social Icons Strip](/component-basics/marketplace-components/social-icon/social-icons-strip.md)
{% endcontent-ref %}

**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.

{% content-ref url="/spaces/-LhGHkPsv15svPIU5I7C/pages/50PeNf7n2mOuomkB0hyf" %}
[Social Icon (Standalone)](/component-basics/marketplace-components/social-icon/social-icon-standalone.md)
{% endcontent-ref %}

{% hint style="warning" %}
**Layout is shared. Configuration is per icon.** That distinction is intentional.
{% endhint %}

***

### **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](http://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](https://forum.adalo.com/)! 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!](https://ideas.adalo.com/tutorial-requests)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/component-basics/marketplace-components/social-icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.