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.

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

circle-exclamation

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.

circle-exclamation

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

circle-exclamation

Help

If you need additional help with this article, you can always ask in our community forumarrow-up-right! 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!arrow-up-right

Last updated

Was this helpful?