Using Custom SVG Icon on Divi Blurb Module

Divi is a visual website builder built exclusively for WordPress. It comes with a number of design elements -- called modules -- to make it easy for you to create the pages of your website. One of the modules offered by Divi is Blurb.

Blurb is a Divi module that you can use to add things like features list, post author, and other elements containing image and text element. In addition to image, the Divi Blurb module also supports icon. In Divi itself, you can add an icon from Font Awesome and the icons created by the Divi. The Blurb module doesn't allow you to upload an SVG icon file.

However, since Divi -- and WordPress -- are open source, you can edit or add the code to make things work the you want. You can follow the instructions below to use a custom SVG icon on the Divi Blurb module.

Using Custom SVG Icon on Divi Blurb Module

To use a custom SVG icon on the Divi Blurb module, first you need to the following PHP snippet the functions.php file of Divi.

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

What the above code does is to allow SVG upload in WordPress (the default WordPress configuration doesn't allow SVG upload).

Once you are done adding above code, edit a page with Divi. On the Divi Builder editor, add the Blurb module. Instead of icon, you can use image on the module. So, make sure the Use Icon option is disabled on the Image & Icon settings block.

Next, click the plus icon to select the image file you want to use. You can select SVG icon you want to use.

That's it.