Custom Glyph in ServiceNow portal - Icon Link widget

Step1: You have to upload the image to image to the table db_image
Step2: Clone the widget Icon Link
Step3: Html code is as below

<div>
   <!--// Top Icon -->
   <a ng-if="::(options.link_template == 'Glyph Icon' || !options.link_template)" ng-href="{{::data.href}}" class="glyph_icon {{::options.class_name}}" target="{{::data.target}}">
       <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}" align="center" style="margin-right: auto; margin-left: auto; display: block;"></div>
       <h4 style="text-align: center;">{{::options.title}}</h4>
       <span class="text-muted">{{::options.short_description}}</span>
       <p>  </p>
   </a>


   <!--// Image Icon -->
   <a ng-if="::(options.link_template == 'Image Icon')" ng-href="{{::data.href}}" class="image_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
       <div><img   src="{{data.image}}" alt="" align="left" style="margin-right: 7px; margin-left: auto; display: block;"/>
           <h3 style="font-weight: 300; margin-top: 22px">{{::options.title}}</h3>
       <span class="text-muted">{{::options.short_description}}</span></div>
       <p>  </p>
   </a>

</div>


Step4: Server side coding


(function(){
var gr = $sp.getInstanceRecord();
data.href = $sp.getMenuHREF(gr);
data.target = options.target || "";


var img = new GlideRecord('db_image');
img.addQuery('name', 'custom_icon.png');
img.query();
if (img.next()){
data.image = img.getValue('name');
}
})();