> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/component-basics/marketplace-components/social-icon/social-icons-strip.md).

# Social Icons Strip

### Walkthrough

#### Step 1: Add the Component

1. Open your screen in the Adalo Builder.
2. Click the **+ Add Component** button.
3. Search for **Social Icons Strip** and drag it onto your screen.

<figure><img src="/files/9kBacSBRmU4LomUiYJRo" alt="" width="563"><figcaption></figcaption></figure>

#### Step 2: Adjust Strip Layout

Open the **Setup** tab and expand **Social Icons Strip**. Configure the shared layout settings:

* **Alignment** — Left, Center, or Right
* **Container Padding** — Controls spacing around the entire strip
* **Icon Size** — Adjusts all icons together (icons cannot be resized individually within a strip)
* **Icon Spacing** — Controls the space between icons
* **Hide icons if no link available** — Hides icons at runtime if no URL is provided

<figure><img src="/files/XvYLrjesbbtTrwIvxblx" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="warning" %}
All icons in the Strip scale and align together. They cannot be resized individually. If you need different sizes, use the Standalone version instead.
{% endhint %}

#### Step 3: Enable and Configure Icons

1. Expand **Icon 2** in the left panel.
2. Toggle **Enabled** to ON.
3. Select a **Platform** from the dropdown.
4. Add a **Link** (URL).
5. Set a **Click Action** (typically **External Link**).
6. Repeat for Icons 3–10 as needed.

<figure><img src="/files/TZKXTorEQ55ZQ5FoFZB2" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="warning" %}
Icon 1 is always visible and cannot be disabled.
{% endhint %}

Inside each icon panel you can also configure:

* **Use Platform Brand Colors** — Toggle ON to apply the official brand color automatically
* **Icon Color** — Set a custom color (only available if brand colors are OFF)

Each icon can link to a different external URL.

#### Step 4: Use Custom Platform (Optional)

Set **Platform → Custom** to unlock additional options:

* **Font Awesome icon name** — Enter the icon name (must match exactly)
* **Material icon** — Select a Material Design icon
* **Uploaded image** — Use your own image as the icon
* **Image rounding** — Control the corner radius of uploaded images
* **Custom icon color** — Set the color for custom icons

{% hint style="warning" %}
&#x20;Font Awesome icon names must match exactly. Do not include the `fa-` prefix. Only Free Font Awesome icons are supported.
{% endhint %}

### 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.