Verbb
Developers

GraphQL

You can fetch field content via GraphQL for Icon Picker fields. The resulting values will be identical to an icon object.

{
    entries(id: 1234) {
        ... on blog_blog_Entry {
            iconPickerField {
                value
                iconSet
                label
                keywords
                type
                isEmpty
                url
                path
                inline
                glyph
                glyphName
            }
        }
    }
}

{
    "data": {
        "entries": [
            {
                "iconPickerField": {
                    "value": "/brands/accessible-icon.svg",
                    "iconSet": "/brands",
                    "label": "accessible-icon",
                    "keywords": "accessible-icon",
                    "type": "svg",
                    "isEmpty": false,
                    "url": "/assets/icons-testing/brands/accessible-icon.svg",
                    "path": "/web/assets/icons-testing/brands/accessible-icon.svg",
                    "inline": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z\"/></svg>",
                    "glyph": null,
                    "glyphName": null
                }
            }
        ]
    }
}

The IconInterface Interface

This is the interface implemented by every Icon Picker field’s GraphQL object type ({fieldHandle}_Icon). Use it when you want one fragment or selection set to work across different field handles.

FieldTypeDescription
valueStringThe value of the icon. This will vary depending on the type of icon.
iconSetStringThe icon set this icon belongs to.
labelStringThe named representation of the icon.
keywordsStringThe keywords used to search for the icon by. Defaults to the label.
typeStringWhat type of icon this is: svg, sprite, glyph, or css.
isEmptyBooleanWhether there is an icon selected for this field.
urlStringThe full URL to the icon.
pathStringThe full path to the icon.
inlineStringThe raw contents of the icon (for example inline SVG).
glyphStringThe character representation of a font glyph.
glyphNameStringThe named representation of a font glyph.

Reusable Fragments

Because each {fieldHandle}_Icon type implements IconInterface, you can define a single fragment and spread it on any Icon Picker field:

fragment Icon on IconInterface {
    value
    iconSet
    label
    keywords
    type
    isEmpty
    url
    path
    inline
    glyph
    glyphName
}

fragment Example on blog_blog_Entry {
    iconPickerField {
        ...Icon
    }
}
Last updated: May 2, 2026, 3:19:07 PM
Previous Icon Sets