DEV Community

Cover image for Using Custom SVG Icon on Divi Blurb Module
Aliko Sunawang
Aliko Sunawang

Posted on

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' );
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

Image description

That's it.

Top comments (0)