Search

How to Use Custom SVG Icon in Divi Blurb Module

When choosing an image for your Divi’s Blurb module, you have the option to choose from pre-made icons or upload your own custom image. However, it’s important to note that you can only upload images with file extensions that are included in the WordPress registered file list.

If you want to upload an SVG file to get its benefits for the Divi blurb module, unfortunately WordPress media upload does not currently support SVG files. However, don’t worry – we’ve put together a tutorial to guide you through the process of using a custom SVG icon for your blurb module in Divi

Add a Custom SVG icon in Divi

Step 1: Enable SVG Upload for WordPress

To use SVG files in the Divi blog module on WordPress, you must first enable the ability to upload them. Before making any changes, it is recommended to create a backup of your site and use a child theme to prevent any potential issues or loss of modifications when updating the parent theme.

Once you’re ready, navigate to the theme file editor by going to Appearance → Theme File Editor on your WordPress admin dashboard (if you’re using a block theme, the theme file editor can be found under the Tools menu). Then, add the following code to the bottom of the functions.php file in the Theme File list.

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

Save changes made to the file by clicking the Update File button.

Now, your WordPress will have the ability to upload SVG files for your Divi’s blurb module.

Step 2: Blurb Module with SVG Icon

Adding the SVG icon to your blurb module is just like adding any other image to the module. It’s by going to your desired blurb module or create a new one on the Divi Builder and add the icon by clicking on the +Add Image on the Image & Icon block.

Upload SVG icon
Blurb module with SVG icon

And that’s it!

The Bottom Line

When selecting an image for Divi’s Blurb module, you have the option to choose from pre-made icons or upload your own custom image. And if combined with an SVG file for the illustration or icon, your content will load faster as SVG files tend to be smaller in size compared to other image extensions. This tutorial shows you how to use an SVG file on the blurb module in Divi.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.