diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a38f875..2850e95c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Added color highlight for problematic properties
 - Upgraded codemirror from version 5 to version 6
 - Add code editor to allow editing the entire style
+- Add support for sprite object in setting modal
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
diff --git a/cypress/e2e/maputnik-driver.ts b/cypress/e2e/maputnik-driver.ts
index 8a1e1314..cca696b7 100644
--- a/cypress/e2e/maputnik-driver.ts
+++ b/cypress/e2e/maputnik-driver.ts
@@ -199,6 +199,10 @@ export class MaputnikDriver {
 
     appendTextInJsonEditor: (text: string) => {
       this.helper.get.element(".cm-line").first().click().type(text, { parseSpecialCharSequences: false });
+    },
+
+    setTextInJsonEditor: (text: string) => {
+      this.helper.get.element(".cm-line").first().click().clear().type(text, { parseSpecialCharSequences: false });
     }
   };
 
diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
index 3ff7504c..4007fdad 100644
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -170,12 +170,22 @@ describe("modals", () => {
     });
 
     it("sprite url", () => {
-      when.setValue("modal:settings.sprite", "http://example.com");
+      when.setTextInJsonEditor("\"http://example.com\"");
       when.click("modal:settings.name");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         sprite: "http://example.com",
       });
     });
+
+    it("sprite object", () => {
+      when.setTextInJsonEditor(JSON.stringify([{id: "1", url: "2"}]));
+
+      when.click("modal:settings.name");
+      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+        sprite: [{ id: "1", url: "2"}],
+      });
+    });
+
     it("glyphs url", () => {
       const glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
       when.setValue("modal:settings.glyphs", glyphsUrl);
diff --git a/src/components/modals/ModalSettings.tsx b/src/components/modals/ModalSettings.tsx
index 5fa01cfd..cde26567 100644
--- a/src/components/modals/ModalSettings.tsx
+++ b/src/components/modals/ModalSettings.tsx
@@ -11,6 +11,8 @@ import FieldSelect from "../FieldSelect";
 import FieldEnum from "../FieldEnum";
 import FieldColor from "../FieldColor";
 import Modal from "./Modal";
+import FieldJson from "../FieldJson";
+import Block from "../Block";
 import fieldSpecAdditional from "../../libs/field-spec-additional";
 import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";
 
@@ -144,13 +146,13 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
           value={(this.props.mapStyle as any).owner}
           onChange={(value) => this.changeStyleProperty("owner", value)}
         />
-        <FieldUrl
-          fieldSpec={latest.$root.sprite}
-          label={t("Sprite URL")}
-          data-wd-key="modal:settings.sprite"
-          value={this.props.mapStyle.sprite as string}
-          onChange={(value) => this.changeStyleProperty("sprite", value)}
-        />
+        <Block label={t("Sprite URL")} fieldSpec={latest.$root.sprite} data-wd-key="modal:settings.sprite">
+          <FieldJson
+            lintType="json"
+            value={this.props.mapStyle.sprite as any}
+            onChange={(value) => this.changeStyleProperty("sprite", value)}
+          />
+        </Block>
 
         <FieldUrl
           label={t("Glyphs URL")}