Move inline icons to SVG icons

Feature Requests / Improvements
1

Why Bricks Builder Should Switch from Font Icons (<i>) to SVG Icons

Bricks Builder is designed for performance and flexibility, yet using inline <i> font icons creates unnecessary overhead. Switching to native SVG icons would provide significant performance improvements and a better user experience. Here’s why:

:rocket: 1. Font Icons Load an Entire Icon Set (Unnecessary Overhead)

  • Using <i> tags with FontAwesome or any font-based icons requires loading a full font file (often 100KB+), even if you use just a few icons.
  • SVG icons are lightweight and load only what’s needed, reducing overall page weight.

:zap: 2. Web Fonts Are Render-Blocking

  • Icon fonts require an extra HTTP request, delaying the First Contentful Paint (FCP).
  • If the font file loads slowly or fails, users see missing icons (Tofu box issue ☐).
  • SVGs eliminate this problem by being inline and instantly visible.

:chart_with_upwards_trend: 3. Improves Google Core Web Vitals & Lighthouse Scores

  • Render-blocking fonts negatively impact performance metrics like FCP and LCP.
  • Google Lighthouse penalizes pages that rely on external font files for icons.
  • SVGs appear immediately, improving page load speed and SEO rankings.

:art: 4. Fully Scalable & Customizable Without Extra CSS

  • <i> font icons require extra CSS to change colors, sizes, or add effects.
  • SVGs allow direct customization (fill, stroke, animation) without relying on external styles.

:hammer_and_wrench: 5. No More Manual SVG Uploads – Native SVG Support Would Be a Game-Changer

Currently, users must:

  1. Manually download SVG icons
  2. Upload them one by one
  3. Insert them manually

If Bricks natively supports SVG icons, users could:
:white_check_mark: Select icons directly from the UI (without manual uploads)
:white_check_mark: Save time by skipping extra steps
:white_check_mark: Improve workflow, making Bricks even more efficient and user-friendly

:fire: Conclusion: Bricks Should Go Fully SVG for Better Speed & Usability

By replacing <i> font icons with native SVG support, Bricks Builder would:
:white_check_mark: Reduce HTTP requests & improve page load times
:white_check_mark: Eliminate render-blocking font issues
:white_check_mark: Enhance accessibility & SEO
:white_check_mark: Provide a seamless icon experience without manual uploads

I noticed some builders already offer SVG-based icons as their icon library.
Bricks is all about performance. Moving to a fully SVG-based icon system would be a huge step forward.:rocket:

Regards,
Jornes

17 Likes
2

Would be a nice improvement. Please make it happen.

2 Likes
3

Maybe a switch would help, to deactivate all icon fonts by default and that those fonts are not loaded on fronted and not shown on backend.

I am not sure that there are many bricks users for which this feature is not important, so they could use the font version as an option.

And there might be a license issue when providing raw SVG icons instead of icon fonts. Might not be allowed. And those hundreds icons would bloat the media library. Or is there a better option with svg icons?