My customers have often complained that the Tiles view in the QuickLinks web part isn’t pretty enough. Here is a recreation that uses the SharePoint theme’s colours.
Create a new list with the following additional columns:
Icon (Single line text)
URL (Hyperlink)
Sort (Number, no decimals)
NewTab (Yes/No)
For the icons, use friendly names from https://uifabricicons.azurewebsites.net/
Try it out – it looks quite good!

Create a new Gallery view, and sort it by the Sort column and add the following formatting to the view.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"hideColumnHeader": true,
"hideSelection": true,
"width": "110",
"height": "100",
"formatter": {
"elmType": "a",
"style": {
"text-decoration": "none",
"display": "inline-block"
},
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] = true, '_blank', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeDarkAlt ms-bgColor-themeLighterAlt--hover ms-fontColor-white--hover ms-fontColor-white"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"min-width": "110px",
"min-height": "100px",
"border-radius": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-xxl"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px"
},
"attributes": {
"class": "sp-row-title "
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
}
Obviously inspired by https://github.com/pnp/List-Formatting/tree/master/view-samples/icon-link-tiles
Tell me what you think…