Ctrlk
Sign Up for Adalo
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

All icons in the Strip scale and align together. They cannot be resized individually. If you need different sizes, use the Standalone version instead.

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.

Icon 1 is always visible and cannot be disabled.

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

Font Awesome icon names must match exactly. Do not include the fa- prefix. Only Free Font Awesome icons are supported.

Help

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

PreviousSocial IconNextSocial Icon (Standalone)

Last updated

Was this helpful?