Looking for a way to upload custom icons into Bubble?
While it’s possible to use icons from Bubble’s default library, you might find that this range is quite limited.
Did you know it’s possible to upload your own custom icons into Bubble using an SVG file?
This means you can download icons online, or even create your own in a tool like Figma. You can then upload these icons into Bubble.
Beyond this, you can fully customize the color of the icon within your Bubble editor, or even let your users choose a custom color of their preference.
The process of uploading custom icons into Bubble includes:
- Sourcing and downloading a custom icon
- Uploading a custom icon into your Bubble app
- Customizing the design of the icon
- Allowing users to customize the color of the icon
Full Transcript of Tutorial
1. Sourcing and downloading a custom icon
Before we upload a custom icon into Bubble, it’s important to first understand the file format that can power this experience.
Throughout this guide, we’ll work with a file format known as SVG. SVG stands for Scalable Vector Graphics. Essentially, an SVG is like an image that’s completely customizable. SVG’s are also renowned for maintaining image quality when they’re scaled up or down.
SVG is a format designers use when exporting images on the web.
When it comes to uploading your own custom icon, you’ll need to utilize an SVG file. Instead of using Bubble’s standard icon element, we’ll opt to use a HTML element. Inside this element, we can add a string of code to display our SVG file.
After adding our HTML element to the page, we’ll first update its dimensions. By selecting the layout tab, we can set both the width and height of this element to 100px by 100px.
After configuring this element, we can now source a custom icon.
If you’d like access to a library of free SVG icons, you can visit SVG repo. On this website, there’s thousands of SVG icons that are free to download.
In our example today, we’ll select an icon that looks like a cluster of connected nodes. When we click the download button, you’ll see the icon is added to your ‘downloads’ folder.
If you click on the file from your downloads, it will automatically open a preview of the icon within a new tab in your browser.
2. Uploading a custom icon into your Bubble app Bubble
To upload a copy of the icon you downloaded within Bubble, you’ll need to right-click on the icon in your browser, then choose to inspect the element.
Within the Chrome Developer Tools menu, you’ll then see a string of code that displays the SVG file. If you right-click on this, you can copy the code.
From here, we can then open our Bubble editor and paste this code into the HTML element on our page. As you’ll see, our HTML element will now display the icon we had copied.
3. Customizing the design of the icon
Because an SVG file is customizable, it’s possible to change the size and color of the icon directly within your Bubble editor.
For example, the default height of this SVG icon is 800px by 800px. At this point in time, the icon is too large for the HTML element it sits within. To alleviate this, we can customize the height settings within the SVG code. If we set this to 100px by 100px, it will fit perfectly on our page.
If you’d like to customize this icon further, you can also update the HEX color. Within the SVG code, you’ll see a string that references the current color of the icon. This looks like ‘svg”fill=”#000000”.
To update this color, simply replace the HEX color code with any color code you’d like. This will then update the color of the icon in real time.
4. Allowing users to customize the color of an icon
One of the more powerful customizations for an SVG is the ability to update the color dynamically. This can allow your users to change the color to match their own preferences.
In order to create this feature, you’ll need to start by adding a color picker element to your Bubble app. At this point in time, Bubble doesn’t have a native color picker, so we’ll need to install a plugin.
If you open the plugin tab inside your editor and search for the word ‘color picker’, you’ll see a free plugin called Air Color Picker. Once you install this plugin, you’ll now see this element displayed under your input forms.
If you were to then add a color picker to your page, your users will now have the ability to select any color of their choice. But how can this color update the icon in real time?
If you click on your SVG icon once again, you’ll see a string of code that allows you to add a custom HEX color code. Instead of manually updating this with a static value, we can have this value reference the color selected from our input field.
To do this, simply highlight the static color code in your SVG, then replace this with a dynamic value. The data you’ll replace this with is the ‘color picker’s value’.
Now, the color of the icon will update in real time based on a user’s preference.
And just like that, you know how to upload a custom icon in Bubble. On top of this, you also have the ability to customize the dimensions and color of the icon, as well as give your end users the ability to influence the style of the element.