Custom SVG Icon Mobile

Overview

Render custom SVG icons inside Bubble Mobile using full SVG code or only the path data.
Change the icon color directly from the plugin property and keep your mobile UI clean, flexible and brand-consistent.
The plugin extracts the SVG path and viewBox automatically, making it easy to use icons from libraries like Font Awesome.
Perfect for custom navigation icons, action buttons, dashboards, menus, labels and mobile app interfaces.


Actual Problem

Bubble Mobile builders often need icons that match the exact app design, but native icon options can be limited when you want to use your own SVGs, control color dynamically or reuse icons from external libraries.

Manually converting SVGs for React Native can be annoying, especially when you only have the path value or need a quick way to render a custom icon inside a Bubble Mobile layout.

This plugin makes that workflow simple: paste SVG code or path data, choose a color and display the icon in your mobile app.

Why choose this plugin?

⚡ Performance: renders lightweight SVG paths using native mobile SVG rendering.

🎨 Customization: set the icon color directly from the plugin property.

📱 Mobile Ready: built specifically for Bubble Mobile apps.

🧩 Easy Setup: paste the full SVG code or only the path d value.

🔄 Workflow Integration: published states let you know whether an icon exists and access the extracted path.

Main Features

🧩 Custom SVG rendering
Display custom SVG icons in Bubble Mobile layouts.

🛠️ Full SVG or path support
Paste a full SVG code or only the path d value.

🎨 Icon color control
Change the icon fill color using the plugin_color property.

📐 Automatic viewBox extraction
The plugin reads the viewBox from the SVG when available.

⭐ Font Awesome friendly
When no viewBox is found, the plugin uses a Font Awesome style default viewBox.

📌 Published states
Access path_d and has_icon states inside Bubble.

Use Cases

Mobile navigation
Use custom icons in tab bars, menus, headers and app navigation.

Dashboards
Add branded icons to metrics, cards, shortcuts and status indicators.

Marketplace
Display custom category icons, product badges, seller labels and action icons.

CRM
Use SVG icons for leads, tasks, statuses, pipeline stages and quick actions.

SaaS apps
Create a consistent icon system for settings, features, teams, billing and user flows.

Custom UI kits
Build mobile interfaces with icons that match your design system instead of generic defaults.

FAQ

Is this plugin for Bubble Mobile?
Yes. This plugin is designed for Bubble Mobile.

Can I paste a full SVG?
Yes. The plugin can extract the path and viewBox from full SVG code.

Can I paste only the SVG path?
Yes. If you already have the d value, you can paste it directly.

Can I change the icon color?
Yes. Use the plugin_color property to control the icon fill color.

Does it publish any states?
Yes. It publishes path_d and has_icon.

Does it require an API key?
No. It renders the SVG directly and does not require an API key.

Try It Risk-Free

Subscribe to try the plugin safely. If you cancel a few days later, you will be charged only for the time used (e.g., monthly price $3 → $0.10 per day for 30 days).

Need help?



Other plugins from Codes for you:

Native File Uploader (For Mobile)
Input Mask (Mobile)
Phone Number Input (Mobile)
QR code Scanner (Mobile)
Smart Formatter Input (Mobile)
Video Player Bubble (Mobile)
Audio Recorder Pro - Bubble Mobile