Bubble

How to add social media icons in Bubble.io?

Learn how to easily add social media icons to your Bubble.io app. Follow our 10-step guide to enhance your design with functional and stylish social media links.

Developer profile skeleton
a developer thinking

Overview

Adding social media icons in Bubble.io is a great way to connect with your audience. This guide will walk you through the process step-by-step, ensuring that your icons not only look good but also function as intended. You'll start by opening your Bubble.io app, navigate to the Design tab, and add icon elements. Customize these icons by choosing the appropriate social media logos, adjusting their size and color, and aligning them horizontally. Finally, link each icon to the corresponding social media page, test your design, and deploy it.
Get a Free No-Code Consultation
Meet with Will, CEO at Bootstrapped to get a Free No-Code Consultation
Book a Call
Will Hawkins
CEO at Bootstrapped

How to add social media icons in Bubble.io?

  Step 1: Open Your Bubble.io App    Step 2: Navigate to the Design Tab  1. Go to the left-hand panel and click on the "Design" tab.   Step 3: Add an Icon Element   1. From the left-hand panel, drag and drop the "Icon" element onto your canvas where you want the social media icons to appear.   Step 4: Choose the Social Media Icon  1. Click on the icon element you added. 2. In the right-hand property editor, find the "Icon" dropdown menu. 3. Scroll through or search for the social media icon you need (e.g., Facebook, Twitter).   Step 5: Adjust the Icon Size and Color   1. In the property editor, adjust the size by changing the "Width" and "Height." 2. Choose a color for the icon that matches your design scheme.   Step 6: Repeat for Additional Icons  1. Repeat Steps 3 through 5 for each additional social media icon you want to add (e.g., Instagram, LinkedIn).   Step 7: Align the Icons Horizontally   1. To align the icons horizontally, drag and place each icon beside the other. 2. Use the alignment tools to ensure they are evenly spaced.   Step 8: Add Links to the Icons  1. Click on an icon to select it. 2. In the property editor, click on "Start/Edit Workflow." 3. Add a navigation action such as "Go to an external website." 4. Enter the URL for the respective social media page.   Step 9: Test Your Design  1. Click on the "Preview" button at the top right to test the links and ensure they work correctly.   Step 10: Save and Deploy  1. Once you are satisfied with the design and functionality, save your work. 2. Deploy the changes to your live website.  

Explore more Bubble tutorials

Complete Guide to Bubble.io: Tutorials, Tips, and Best Practices

Explore our Bubble.io tutorials directory - an essential resource for learning how to create, deploy and manage robust server-side applications with ease and efficiency.

Why are companies choosing Bootstrapped?

40-60%

Faster with no-code

Nocode tools allow us to develop and deploy your new application 40-60% faster than regular app development methods.

90 days

From idea to MVP

Save time, money, and energy with an optimized hiring process. Access a pool of experts who are sourced, vetted, and matched to meet your precise requirements.

1 283 apps

built by our developers

With the Bootstrapped platform, managing projects and developers has never been easier.

hero graphic

Our capabilities

Bootstrapped offers a comprehensive suite of capabilities tailored for startups. Our expertise spans web and mobile app development, utilizing the latest technologies to ensure high performance and scalability. The team excels in creating intuitive user interfaces and seamless user experiences. We employ agile methodologies for flexible and efficient project management, ensuring timely delivery and adaptability to changing requirements. Additionally, Bootstrapped provides continuous support and maintenance, helping startups grow and evolve their digital products. Our services are designed to be affordable and high-quality, making them an ideal partner for new ventures.

Engineered for you

1

Fast Development: Bootstrapped specializes in helping startup founders build web and mobile apps quickly, ensuring a fast go-to-market strategy.

2

Tailored Solutions: The company offers customized app development, adapting to specific business needs and goals, which ensures your app stands out in the competitive market.

3

Expert Team: With a team of experienced developers and designers, Bootstrapped ensures high-quality, reliable, and scalable app solutions.

4

Affordable Pricing: Ideal for startups, Bootstrapped offers cost-effective development services without compromising on quality.

5

Supportive Partnership: Beyond development, Bootstrapped provides ongoing support and consultation, fostering long-term success for your startup.

6

Agile Methodology: Utilizing agile development practices, Bootstrapped ensures flexibility, iterative progress, and swift adaptation to changes, enhancing project success.

Yes, if you can dream it, we can build it.