New Free Component Drop! - Social Icon Strip (group + solo)

Hello everybody, hope y’all doing well!

Big thanks & full credits to @Michael from the Adalo engineering team for building both components included in this release!

  • Social Icon Strip:- A full lineup of up to 10 icons (think of it as a perfectly aligned orchestra of social links :musical_notes:).
  • Social Icon:- A standalone icon (sometimes one icon is all you need… like that morning coffee :sweat_smile:).

:sparkles: Features at a Glance

  • Supports all major platforms: Facebook, Instagram, X, LinkedIn, YouTube, TikTok, Pinterest, Snapchat, WhatsApp, Telegram, Email, Website.
  • Automatic brand colors: Icons show in official brand colors by default.
  • Hide icons if no link is available: Spacing remains perfect even when some icons are empty (like magic :glowing_star:).
  • Custom platform option: Supports Font Awesome, Material icons and images.
  • Precision control: Sliders for alignment, spacing, padding and icon size.
  • Click Action: Tap an icon to open the link in a browser or trigger any action you choose.

:gear: Components Configuration

Social Icon Strip

  1. Default state: Starts with Icon 1 visible; Icons 2–10 are disabled until enabled manually.
  2. Top-Level Settings:
  • Alignment: Left, Center, or Right.
  • Container Padding: From 0–32px.
  • Icon Size: From 12–100px.
  • Icon Spacing: From 0–32px.
  • Hide icons if no link: Toggle ON to hide icons without any mapped links when opening the app.
  1. Icon Settings:
  • Enable toggle: Only for icons 2–10 only.
  • Platform selection: Facebook, Instagram, X, LinkedIn, YouTube, TikTok, Pinterest, Snapchat, WhatsApp, Telegram, Email, Website, or Custom.
  • Use Platform Brand Colors: Toggled ON by default, toggle OFF to pick your own color.
  • Icon Color: Available when brand colors are toggled OFF.
  • Link: The URL/Link for the icon.
  • Click Action: Use the Link parameter in actions to open or fire any another action.
  1. Platform Options:
  • Font Awesome: Enter any icon name exactly (no fa- prefix).
  • Material Icon: Pick from Adalo’s built-in library.
  • Image: Upload a custom image or link it from the database for make it dynamic including placeholder images, adjust rounding from 0–50%.

Social Icon (Standalone)

  • Works like a single icon slot from the Strip.
  • Same platforms, Layout settings and Action options.
  • Own Icon Size slider for independent scaling (12-100px).

Alright, a quick 10-second break from reading… Let’s dance for the happiness of this amazing component and get excited for the ones coming next!!!

giphy


:trophy: Recommended Use Cases

  • Profile cards or user sections
  • Footers that look polished
  • Business social presence
  • Creator or influencer link hubs
  • Anywhere you want professional, aligned and clickable social icons or just a set of icons

:magnifying_glass_tilted_left: Learn More

  • Maximum of 10 icons per strip — stack strips for more.
  • Icon 1 cannot be disabled in strip.
  • “Hide icons if no link” only works at opening the app as still visible in the builder/canvas.
  • Font Awesome only includes free icons — Pro icons will render as a placeholder
  • Help Document Page : Social Icon | Adalo Resources (Thanks to the CH team members!!)

:eyes: Try It Live

Preview it here: Social Icon Strip Demo


:memo: We’d love your feedback!

  • Where would you add this in your app first?
  • Experiencing any bugs?
  • Any features you’d like to see in future updates?

Until the next component drop, stay safe, keep building apps with Adalo and have a great day! :people_hugging:
Celebration GIF

8 Likes

Pinning for few days to spread the news!

Finally, what great news! He’s already installed it and started using it! Congratulations! Let’s keep going! Good Job!

1 Like

It would be great if we could add text below to create navigation bars, or if we could implement this feature in the navigation bar.

1 Like

I didn’t understand where it’s located

Santiago, noted!

Nadav, you can install the component from the marketplace.

Thank you and have a great day!

1 Like

Looks good, easy to set up and usable for anything….. thanks for the component !!

1 Like

Any plans for social icons, in the icon library?

I like the flexibility and convenience.

1 Like

@C3PO, did you meant if the brand icons are available in Adalo’s icon library (material icon library) to use on another component?

Appreciate the feedback so far from everyone! :raising_hands:

Thank you and have a great day!

Yes.

  1. Add icon component. 2. Choose any icon we need.

Would love a bigger library, with more icons.

Take it a step further,

offer a couple / few styles, that could be organized in style families. ( like font families)

So, my “Share” icon matches the style of my “Profile” icon… etc.

Generally speaking, I like to build with smaller components, to build custom.

ZOOMING-out.

I could make better designs, with better controls.

If tools like snapping, guides, 3-5 selectable layers, and style sheets (much like adalo has for fonts, now), a lot of time could be saved.

Between actions, database, and design. I spend a disproportionate amount of time tweaking designs. Adalo has too much of a non-standard “order of operations” to design productively. i.e. resize text while it is in a rectangle VS resize text BEFORE it is placed in a rectangle.

HATS-off to the team at Adalo. Just making all this stuff work together is amazing.

1 Like

Hi @C3PO,

Thanks for the details!

Would you be able to create a seperate topic for this in the Roadmap > Feature Requests category? (first proceed with a search because then you can simply add a reply with your vote and those topics are prioritized in the search results) If you’re facing any issues related to this component or would love to see any improvements in the component, please post them here!

This will be a solution for you in the coming days! : Wanted to show off an app! - #7 by Dilon

Thank you and have a great day!

1 Like

I am picking up, what you’re putting down. Much respect. However, my Spidey senses tell me, adding features to their to-do list isn’t beneficial. I am paying Adalo. Think about it.

I am old, and old school. Quick story / reference: Websites used to have a single blue hyperlink, in which users COULD give feedback, and developers were over-the-top enthusiastic about getting feed back ( Much like Adalo’s CEO, THANKS GOODNESS!! clap clap ) Now-a-days, or Previously, complete opposite. Not fan. But, I understand that the internet will always belong to the future.

Thanks for sharing your opinion, @C3PO and I completely understand it!

Adding a feature request actually helps a lot because once more makers vote on the same idea, it becomes much easier to prioritize. I remember James (Adalo CEO) mentioned this under in one of your topic recently that the engineering team’s main focus this year is AI Ada, while a smaller group is working on new components and smaller requests.

While migrating the Canny data into the forum, I noticed many requests that were completed but never updated with the solution as well as some commonly requested features that still aren’t available like some of the ones you mentioned above. I’m currently reviewing everything one by one, merging related requests and sharing those with the team, so requests stay visible and tracked! I’m reading every topic and reply so your thoughts and feedback are definitely being noted! Hopefully eng-team be able to ship more of these basic improvements this year and with the help of AI, move a bit faster too!

If you’re open to it, creating a feature request topic and adding your vote really helps. Separate topics for each feature (with sketches or examples if possible) make it easier for us to understand and for others to vote but if you prefer combining them, that’s totally fine as well.

Thanks again for taking the time to share your ideas, have a great day!

@Santiago, I’ve shared this with Michael and he mentioned it should be an easy add which he would have an update this week! Also he mentioned, around 4 more new components will probably be available this week, so stay tuned!! :clinking_glasses:

Thank you and have a great day!

1 Like

Just to give an update here! 3 components got released last Wednesday (you may have noticed) but due to a reason, they got delisted on the same day. They will be back again very soon and they were,

  1. Bubble/Scatter Chart (Help Doc - Bubble / Scatter Chart | Adalo Resources)

  2. QR/Barcode Generator (Help Doc - QR & Barcode Generator | Adalo Resources)

  3. QR/Barcode Reader (Help Doc - QR and Barcode Reader | Adalo Resources)

There will be an announcement once these are back in the marketplace, so stay tuned!

Thank you and have a great day!

With the QR generator, the resource link states that deep links can be generated.

Shareable links: Encode a website URL, deep link, or social profile as a QR code that users can scan with their phone camera.

Will this be something that will be done by magic text / deeplink function within the builder without needing any third party tools?

@diegozane, yes, for the value it would be the deep link (URL format) with the ID from magic text and upon scanning the generated qr code, it will open that URL. (I didn’t had much time to test and play with those though as it got delisted :sweat_smile:)