# 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&#x26;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&#x26;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&#x26;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)