---
title: "Icon picker"
date: "2023-10-05T01:05:10+00:00"
summary: "Discover our intuitive icon picker tool for seamless design customization. Easily select and integrate icons into your projects with our user-friendly interface, perfect for developers and content creators alike."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/icon-picker"
id: "01188d9b-bbe3-4c3d-b040-684c8e128bd7"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {"type": "string", "pattern": "^form-field$"},
        "id": {"type": "string", "pattern": "^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$"},
        "machine_name": {"type": "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type": "string","pattern": "^form-iconpicker"},
            "title": {"type": "string"},
            "value": {"type": "object"}
          }
        }
      },
      "required": ["id", "type", "data"]
    }
    

Example output:

Given "Icon picker" form element on a component set up like so

![638278ee-Screenshot%202023-12-06%20at%2001.12.40.png](https://acquia.widen.net/content/f926fc96-47c8-44ce-b00f-3db7284d9437/web/638278ee-Screenshot%202023-12-06%20at%2001.12.40.png)

And used on Node layout canvas like so

![99a9149e-Screenshot%202023-12-06%20at%2001.13.16.png](https://acquia.widen.net/content/1910e472-6ea7-4d91-80e5-6a1dbd6dae88/web/99a9149e-Screenshot%202023-12-06%20at%2001.13.16.png)

JSON:API output for this form field will be this:

    {
      "type": "form-field",
      "id": "b770d8e7-0b87-49dc-acdb-1590410cd82c",
      "machine_name": "icon-picker",
      "data": {
        "uid": "form-iconpicker",
        "title": "Icon picker",
        "value": {
          "iconName": 61556,
          "fontFamily": "icomoon"
        }
      }
    }