SVG icons | List Formatting Gallery

SVG icons

The Fluent UI icons are easy to use in column formatting by simply specifying the name in the iconName attribute. However, the available selection of icons may not always meet your needs. Fortunately, you can use inline SVG elements with custom paths. This means you can use icons from sources like Font Awesome that provide SVG versions of their icons!

Shared by Chris Kent
Updated Aug 20, 2018

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "svg", "style": { "height": "13px", "width": "13px", "padding-right": "6px", "fill": "=if(@currentField == 'Female', '#e3008c', if(@currentField == 'Male', '#0078d7', '#333333'))" }, "children": [ { "elmType": "path", "attributes": { "d": "=if(@currentField == 'Female', 'M 10.678572,4.178573 C 10.678572,1.871646 8.806918,0 6.5000003,0 4.1930809,0 2.3214276,1.871646 2.3214276,4.178573 c 0,1.987716 1.3899519,3.653344 3.25,4.074107 V 9.75 H 4.5267844 c -0.1915181,0 -0.348212,0.156694 -0.348212,0.348213 v 1.160713 c 0,0.191518 0.1566939,0.348219 0.348212,0.348219 h 1.0446432 v 1.044642 C 5.5714276,12.843306 5.7281215,13 5.9196402,13 h 1.1607131 c 0.1915181,0 0.348219,-0.156694 0.348219,-0.348213 V 11.607145 H 8.473215 c 0.1915187,0 0.3482126,-0.156701 0.3482126,-0.348219 V 10.098213 C 8.8214276,9.906694 8.6647337,9.75 8.473215,9.75 H 7.4285723 V 8.25268 C 9.2886135,7.831917 10.678572,6.166289 10.678572,4.178573 Z m -6.4999996,0 c 0,-1.279695 1.0417398,-2.321435 2.3214279,-2.321435 1.2796875,0 2.3214273,1.04174 2.3214273,2.321435 C 8.8214276,5.458253 7.7796878,6.5 6.5000003,6.5 5.2203122,6.5 4.1785724,5.458253 4.1785724,4.178573 Z', if(@currentField == 'Male', 'M 12.59375,0 H 9.9192708 C 9.5570313,0 9.3776042,0.436719 9.6315104,0.69401 L 10.203646,1.266146 7.4716146,3.998177 C 6.7200521,3.524219 5.8296875,3.25 4.875,3.25 2.1835938,3.25 0,5.433594 0,8.125 0,10.816406 2.1835938,13 4.875,13 7.5664063,13 9.75,10.816406 9.75,8.125 9.75,7.170312 9.4757813,6.279948 9.0018229,5.528385 L 11.733854,2.796354 12.30599,3.36849 C 12.563281,3.625781 13,3.442969 13,3.080729 V 0.40625 C 13,0.182812 12.817188,0 12.59375,0 Z M 4.875,10.833333 c -1.4929687,0 -2.7083333,-1.215364 -2.7083333,-2.708333 0,-1.492969 1.2153646,-2.708333 2.7083333,-2.708333 1.4929688,0 2.7083333,1.215364 2.7083333,2.708333 0,1.492969 -1.2153645,2.708333 -2.7083333,2.708333 z', 'm 6.5,2.88889 c 1.990625,0 3.611111,1.62049 3.611111,3.61111 0,1.99062 -1.620486,3.61111 -3.611111,3.61111 C 4.509375,10.11111 2.8888889,8.49062 2.8888889,6.5 2.8888889,4.50938 4.509375,2.88889 6.5,2.88889 M 6.5,0 C 2.9114583,0 0,2.91146 0,6.5 0,10.08854 2.9114583,13 6.5,13 10.088542,13 13,10.08854 13,6.5 13,2.91146 10.088542,0 6.5,0 Z'))" } } ] }, { "elmType": "span", "txtContent": "@currentField", "style": { "color": "=if(@currentField == 'Female', '#e3008c', if(@currentField == 'Male', '#0078d7', '#333333'))" } } ] }

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "svg", "style": { "height": "13px", "width": "13px", "padding-right": "6px", "fill": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Female" ] }, "#e3008c", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Male" ] }, "#0078d7", "#333333" ] } ] } }, "children": [ { "elmType": "path", "attributes": { "d": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Female" ] }, "M 10.678572,4.178573 C 10.678572,1.871646 8.806918,0 6.5000003,0 4.1930809,0 2.3214276,1.871646 2.3214276,4.178573 c 0,1.987716 1.3899519,3.653344 3.25,4.074107 V 9.75 H 4.5267844 c -0.1915181,0 -0.348212,0.156694 -0.348212,0.348213 v 1.160713 c 0,0.191518 0.1566939,0.348219 0.348212,0.348219 h 1.0446432 v 1.044642 C 5.5714276,12.843306 5.7281215,13 5.9196402,13 h 1.1607131 c 0.1915181,0 0.348219,-0.156694 0.348219,-0.348213 V 11.607145 H 8.473215 c 0.1915187,0 0.3482126,-0.156701 0.3482126,-0.348219 V 10.098213 C 8.8214276,9.906694 8.6647337,9.75 8.473215,9.75 H 7.4285723 V 8.25268 C 9.2886135,7.831917 10.678572,6.166289 10.678572,4.178573 Z m -6.4999996,0 c 0,-1.279695 1.0417398,-2.321435 2.3214279,-2.321435 1.2796875,0 2.3214273,1.04174 2.3214273,2.321435 C 8.8214276,5.458253 7.7796878,6.5 6.5000003,6.5 5.2203122,6.5 4.1785724,5.458253 4.1785724,4.178573 Z", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Male" ] }, "M 12.59375,0 H 9.9192708 C 9.5570313,0 9.3776042,0.436719 9.6315104,0.69401 L 10.203646,1.266146 7.4716146,3.998177 C 6.7200521,3.524219 5.8296875,3.25 4.875,3.25 2.1835938,3.25 0,5.433594 0,8.125 0,10.816406 2.1835938,13 4.875,13 7.5664063,13 9.75,10.816406 9.75,8.125 9.75,7.170312 9.4757813,6.279948 9.0018229,5.528385 L 11.733854,2.796354 12.30599,3.36849 C 12.563281,3.625781 13,3.442969 13,3.080729 V 0.40625 C 13,0.182812 12.817188,0 12.59375,0 Z M 4.875,10.833333 c -1.4929687,0 -2.7083333,-1.215364 -2.7083333,-2.708333 0,-1.492969 1.2153646,-2.708333 2.7083333,-2.708333 1.4929688,0 2.7083333,1.215364 2.7083333,2.708333 0,1.492969 -1.2153645,2.708333 -2.7083333,2.708333 z", "m 6.5,2.88889 c 1.990625,0 3.611111,1.62049 3.611111,3.61111 0,1.99062 -1.620486,3.61111 -3.611111,3.61111 C 4.509375,10.11111 2.8888889,8.49062 2.8888889,6.5 2.8888889,4.50938 4.509375,2.88889 6.5,2.88889 M 6.5,0 C 2.9114583,0 0,2.91146 0,6.5 0,10.08854 2.9114583,13 6.5,13 10.088542,13 13,10.08854 13,6.5 13,2.91146 10.088542,0 6.5,0 Z" ] } ] } } } ] }, { "elmType": "span", "txtContent": "@currentField", "style": { "color": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Female" ] }, "#e3008c", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "@currentField", "Male" ] }, "#0078d7", "#333333" ] } ] } } } ] }

From the contributor

How to use this sample

Summary

The Fluent UI icons are easy to use in column formatting by simply specifying the name in the iconName attribute. However, the available selection of icons may not always meet your needs.

Fortunately, you can use inline SVG elements with custom paths. This means you can use icons from sources like Font Awesome that provide SVG versions of their icons!

This sample uses the value of the current field to show a custom icon and color. The icon is specified through the d attribute of the path element. The paths have been scaled and extracted from Font Awesome icons. This sample uses gender and provides a default display when neither Male nor Female is selected.

Value	Icon	Color
Female	venus	#e3008c
Male	mars	#0078d7
DEFAULT	genderless	#333333

The pattern of using nested conditional operators with equality operators is the column formatting equivalent of a switch statement. The same logic is used 3 times in this sample. First for the svg's fill style attribute to determine the color of the icon. Next, it is used for the d attribute of the svg element's path element to change the icon. Finally, it is used for the span's color style attribute to ensure the text color is also changed.

screenshot of the sample

View requirements

This format can be applied to a text/choice column and uses the values Female, Male, or anything else

Sample

Solution	Author(s)
generic-svgicon-format.json	Chris Kent

Version history

Version	Date	Comments
1.0	March 26, 2018	Initial release
1.1	August 20, 2018	Switched to Excel-style expressions

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

The icons used were adapted from Font Awesome which is available under the Creative Commons Attribution 4.0 International license.

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

Additional notes

More formats like this

Missing Information Callout

Publishing Status

File Preview Callout with the embed Action