I recently got question from a follower on LinkedIn, which I thoght that the answer can be useful for more people:
I am struggling with formatting a SharePoint list lookup column. I want to make it show an icon but when I click it, it should open the lookup column value on that other list (normal lookup hyperlink behavior). I have achieved this before with text fields but never with Lookups. Any help would be appreciated!
How to use LookUp field values
If you want to use LookUp field values in SharePoint list formatting JSON, you need to access them as subproperties of the field:
@currentField.lookupValue
@currentField.lookupId
OR
$fieldInternalName.looupValue
$fieldInternalName.lookupId
Combining LookUp field values with a custom icon
As requested in the question above, you can also find the below example. In this example we generate a clickable link with an Icon, from a LookUp field that opens the list view form for the Source list.
The href property of the a tag points to the relative path of the display form of the source list and the item ID being generated dynamically by using the @currentField token subproperty @currentField.lookupId.
There are two child span elements inside of the a tag, one holding the icon, and another with the value to be displayed. The text value is obtained by using the @currentField token subproperty @currentField.lookupValue:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontWeight-semibold",
"target": "_blank",
"href": "='/sites/yoursite/Lists/sourcelistpath/DispForm.aspx?ID=' + @currentField.lookupId"
},
"style": {
"text-decoration": "none",
"display":"flex",
"flex-direction":"row",
"gap":"0.5rem"
},
"children": [
{
"elmType": "span",
"attributes":{
"iconName":"LookUpEntities"
},
"style":{
"margin-right":"0.25rem"
}
},
{
"elmType":"span",
"txtContent": "=@currentField.lookupValue"
}
]
}
Results
By using the above JSON template, we can convert a LookUp field into a link with an icon, that opens the source items in display mode from the source lookup:

[…] Source link […]
[…] LookUp column with a custom icon using SharePoint list formatting […]