> 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="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FtXpQKeAtLuDgVlr06cwZ%2FSocial%20Icon%20strip%20SS%201.png?alt=media&amp;token=75bd3d88-d13a-493f-9bb1-3358576e1389" 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="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FkDbsKvvjbqmu94j7bWdB%2FLayout%20Control.png?alt=media&amp;token=0805f083-0c66-4616-baff-a876ed1a6e01" 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="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fa3vjtiUri9Mfm7upqHHY%2FSS1.giff.gif?alt=media&amp;token=02c58f03-fc55-4fe9-b102-cc63b11597c4" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.