I have a page in my communication site in which, I want to add my contact information.

I want to insert icons for it, which should appear before the text.


I want to add phone number icon and then type my phone number.

Similar to this one:

Contact Info Icons

So how to insert icons with text in Modern Experience ?

Thank you !!

  • You cannot add icons directly in Text webpart. You may need to develop your own SPFx webpart. Oct 22, 2019 at 7:14
  • There is any tutorial to follow up to develop this web part and achieve it ? @Ganesh Sanap
    – SmithBZ
    Oct 22, 2019 at 7:20
  • Yes, there is. Check my answer given below. Oct 22, 2019 at 7:23

3 Answers 3


You cannot add icons directly in Text webpart. You may need to develop your own SPFx webpart.

You can use Office UI Fabric icons in SPFx webpart as stated in below official documentation by Microsoft:

Usage of the Office UI Fabric icons in SPFx components.

You can find the official documentation of SPFx on how to setup environment and how to build your SPFx webpart below:

Overview of the SharePoint Framework.

  • So after developing this web part i can add icon inside a textbox instead of using the defaults ones (Bullets & Numbers...) ? @Ganesh Sanap
    – SmithBZ
    Oct 22, 2019 at 8:14
  • SPFx web part is client side coding part. you can do so may things with this. You don't have to use Text webpart if you are creating your own webpart. You can also make it configurable by creating a SharePoint list with contacts and fetch those contacts in your webpart using custom code. Oct 22, 2019 at 8:17

If you want to add custom icons in SPFX webparts then you can convert your image to base64 and set your image src with this base64 code. Like below

<img src='data:image/png;base64,iVB...' />

If the answer is helpful, please upvote and mark as accepted.


You can use html encoding of your icons which should work. All available HTML icons can be found here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.