I tried to do some stuff using Sharepoint's documentation on JSON formatting. The problem is that, I don't really like the templates, and I would like to come up with something more visual. Like for example, instead of showing small icon on colored background, I would like to show sun, cloud, rain, thunderstorm, snow depending on the column value. If the state of the column is changing, like a number column, I would also like to display whether it is changing or not. Is it possible to do all of this? You can see a representation of what I would like to reproduce in the second image.

Image of what I have done first : Image of what I have done first

What I would like to do : What I would like to do


  • 2
    Yes, this is possible using JSON Formatting capabilities. You can show images using img element type. You can show SVG as well. Nov 17, 2021 at 15:04
  • 1
    There are examples of everything you'd like available here: github.com/pnp/list-formatting Nov 17, 2021 at 15:55

2 Answers 2


Please follow the steps:

1.Navigation to the list as a site admin

2.Create the below Choice columns in the list

  • [Etat du projet]
  • [Etat du budget]
  • [Etat du planning]
  • [Etat du perimetre]

enter image description here

3.Use the below JSON formatting for each Choice column

  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
      "elmType": "img",
      "style": {
         "position": "relative", 
         "top ": "50%", 
         "left": "50%", 
         "width": "48px", 
         "height": "auto", 
         "margin-left": "-50%", 
         "margin-top": "0%" 
      "attributes": {
        "src": "=if(@currentField == 'Beau', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/sun.jpg', if(@currentField  == 'Orageux', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/thunderstorm.jpg', if(@currentField == 'Pluvieux', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/rain.jpg', if(@currentField == 'Gel', 'https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/snow.jpg',if(@currentField == 'Nuageux','https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/cloud.jpg','https://xxxx.sharepoint.com/sites/echodu/SiteAssets/icon/na.jpg')))))"

enter image description here

enter image description here


  • You have to upload your images to Site Assets library(or somewhere else on your site) and replace the image URL with your own.

enter image description here


You can use the FabricUI icons which are available here: https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

Find the name of the icon you want (e.g. "sunny" or "rain"): enter image description here

Then include an iconName attribute to specify the name e.g.

"attributes": {
  "iconName": "sunny"

Then use an IF statement. The following example assumes you have a column called "Weather":

"elmType": "div",
"attributes": {
  "iconName": "=if([$Weather] == 'Sunny', 'sunny', if([$Weather] == 'Rainy', 'rain', ''))"

So if the column "Weather" contains a text value of "Sunny" then the sunny icon will be displayed. If "Weather" contains a text value of "Rainy" then the rain icon will be displayed.

NOTE: These icons won't display in button elements.

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.