chore(lib): Bump version to v1.4.0

Dependencipalooza

.vscode/phosphor-home.code-snippets

@@ -21,8 +21,8 @@
 			"{",
 			"\tname: \"${1:name}\",",
 			"\tcategories: [IconCategory${2:categories}],",
-			"\ttags: [${3:tags}],",
+			"\ttags: [\"*new*\", ${3:tags}],",
-			"\tIcon: ${4:icon},",
+			"\tIcon: Icons.${4:icon},",
 			"},"
 		],
 		"description": "Create an IconEntry for phosphor-home"

README.md

@@ -4,7 +4,7 @@
 
 Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
 
-- 683 icons and counting
+- 1047 icons and counting
 - 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone**
 - Designed at 16 x 16px to read well small and scale up big
 - Raw stroke information retained to fine-tune the style
@@ -88,12 +88,24 @@ ReactDOM.render(<App />, document.getElementById("root"));
 
 > **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
 
-## Related Projects
+## Our Related Projects
 
 - [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React
 - [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) ▲ Phosphor icon component library for Vue
 - [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS
+- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter
+- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components
 - [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin
+- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin
+
+## Community Projects
+
+- [phosphor-react-native](https://github.com/duongdev/phosphor-react-native) ▲ Phosphor icon component library for React Native
+- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) ▲ Phosphor icons for Svelte apps
+- [phosphor-r](https://github.com/dreamRs/phosphoricons) ▲ Phosphor icon wrapper for R documents and applications
+- [blade-phosphor-icons](https://github.com/codeat3/blade-phosphor-icons) ▲ Phosphor icons in your Laravel Blade views
+
+If you've made a port of Phosphor and you want to see it here, just open a PR [here](https://github.com/phosphor-icons/phosphor-home)!
 
 ## License
 

bin/fetch.js

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+"use strict";
+
+const fs = require("fs/promises");
+const path = require("path");
+const axios = require("axios");
+const chalk = require("chalk");
+const { Command } = require("commander");
+const { version } = require("../package.json");
+
+const ICON_API_URL = "https://api.phosphoricons.com";
+
+async function main() {
+  const program = new Command();
+  program
+    .version(version)
+    .option(
+      "-r --release <version>",
+      "Fetch icons from Phosphor API and compile to internal data structure"
+    )
+    .option("-p --published", "Published status of icons")
+    .option("-P, --no-published", "Published status of icons")
+    .option("-q --query <text>", "Fulltext search term")
+    .option("-n --name <name>", "Exact icon namee match");
+
+  program.parse(process.argv);
+  const params = new URLSearchParams(Object.entries(program.opts())).toString();
+
+  try {
+    const res = await axios.get(`${ICON_API_URL}?${params}`);
+    if (res.data) {
+      let fileString = `\
+import * as Icons from "phosphor-react";
+import { IconEntry, IconCategory } from ".";
+
+export const icons: ReadonlyArray<IconEntry> = [
+`;
+
+      res.data.icons.forEach((icon) => {
+        let categories = "[";
+        icon.searchCategories?.forEach((c) => {
+          categories += `IconCategory.${c.toUpperCase()},`;
+        });
+        categories += "]";
+
+        fileString += `\
+  {
+    name: "${icon.name}",
+    categories: ${categories},
+    tags: ${JSON.stringify(["*new*", ...icon.tags])},
+    Icon: Icons.${icon.name
+      .split("-")
+      .map((substr) => substr.replace(/^\w/, (c) => c.toUpperCase()))
+      .join("")},
+  },
+`;
+        console.log(`${chalk.inverse.green(" DONE ")} ${icon.name}`);
+      });
+
+      fileString += `
+];
+
+if (process.env.NODE_ENV === "development") {
+  console.log(\`\${icons.length} icons\`);
+}
+
+export const iconCount = (icons.length * 6)
+  .toString()
+  .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+`;
+
+      try {
+        await fs.writeFile(
+          path.join(__dirname, "../src/lib/new.ts"),
+          fileString
+        );
+        console.log(
+          `${chalk.green(" DONE ")} ${res.data.icons.length} icons ingested`
+        );
+      } catch (e) {
+        console.error(`${chalk.inverse.red(" FAIL ")} Could not write file`);
+      }
+    } else {
+      console.error(`${chalk.inverse.red(" FAIL ")} No data`);
+    }
+  } catch (e) {
+    console.error(e);
+    process.exit(-1);
+  }
+}
+
+main();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phosphor-home",
-  "version": "1.1.2",
+  "version": "1.4.0",
   "license": "MIT",
   "homepage": "https://phosphoricons.com",
   "author": {
@@ -20,31 +20,47 @@
   ],
   "repository": "github:phosphor-icons/phosphor-home",
   "private": true,
-  "dependencies": {
-    "file-saver": "^2.0.2",
-    "framer-motion": "^2.1.0",
-    "fuse.js": "^6.4.1",
-    "phosphor-react": "^1.1.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-dropdown-select": "^4.4.2",
-    "react-ga": "^3.1.2",
-    "react-scripts": "3.4.1",
-    "react-use": "^15.3.2",
-    "recoil": "^0.1.2",
-    "svg2png-converter": "^1.0.0",
-    "tinycolor2": "^1.4.1"
-  },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "predeploy": "npm run build",
+    "fetch": "node ./bin/fetch.js",
-    "deploy": "gh-pages -d build",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\""
   },
+  "dependencies": {
+    "file-saver": "^2.0.2",
+    "framer-motion": "^3.10.0",
+    "fuse.js": "^6.4.1",
+    "phosphor-react": "^1.4.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-dropdown-select": "^4.4.2",
+    "react-ga": "^3.1.2",
+    "react-hotkeys-hook": "^3.2.1",
+    "react-scripts": "3.4.1",
+    "react-use": "^15.3.2",
+    "recoil": "^0.5.2",
+    "svg2png-converter": "^1.0.0",
+    "tinycolor2": "^1.4.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/file-saver": "^2.0.1",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-virtualized": "^9.21.10",
+    "@types/tinycolor2": "^1.4.2",
+    "axios": "^0.24.0",
+    "chalk": "^4",
+    "commander": "^8.3.0",
+    "typescript": "^3.9.6"
+  },
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -59,19 +75,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/file-saver": "^2.0.1",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-list": "^0.8.5",
-    "@types/react-virtualized": "^9.21.10",
-    "@types/tinycolor2": "^1.4.2",
-    "typescript": "^3.9.6"
   }
 }

public/assets/phosphor-android/cadmium/wallpaper.json

@@ -0,0 +1,242 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "https://i.imgur.com/xBCTxrP.png",
+			"preview_thumbnail_url": "https://i.imgur.com/xBCTxrPl.jpg"
+		},
+		{
+			"name": "architecture",
+			"preview_url": "https://i.imgur.com/pdV0KQ1.png",
+			"preview_thumbnail_url": "https://i.imgur.com/pdV0KQ1l.jpg"
+		},
+		{
+			"name": "landscape",
+			"preview_url": "https://i.imgur.com/EEBaeFE.png",
+			"preview_thumbnail_url": "https://i.imgur.com/EEBaeFEl.jpg"
+		},
+		{
+			"name": "minimal",
+			"preview_url": "https://i.imgur.com/peX5qVO.png",
+			"preview_thumbnail_url": "https://i.imgur.com/peX5qVOl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Antelope Canyon",
+			"author": "Daniel Olah Nvez",
+			"url": "https://i.imgur.com/KYglyUn.png",
+			"thumbnail": "https://i.imgur.com/KYglyUl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Fractured Light",
+			"author": "Chris Limbrick",
+			"url": "https://i.imgur.com/MILbsga.png",
+			"thumbnail": "https://i.imgur.com/MILbsgal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "The Forest Path",
+			"author": "Kristaps Ungurs",
+			"url": "https://i.imgur.com/95QLblG.png",
+			"thumbnail": "https://i.imgur.com/95QLblGl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Taken",
+			"author": "Touann Gatouillat",
+			"url": "https://i.imgur.com/otCPhH7.png",
+			"thumbnail": "https://i.imgur.com/otCPhH7l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Construct",
+			"author": "Florian Olivo",
+			"url": "https://i.imgur.com/7CxJsXn.png",
+			"thumbnail": "https://i.imgur.com/7CxJsXnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Redline",
+			"author": "Sergio Ibannez",
+			"url": "https://i.imgur.com/uja4O1m.png",
+			"thumbnail": "https://i.imgur.com/uja4O1ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "End Of Line",
+			"author": "Claudio Schwarz-Purzlbaum",
+			"url": "https://i.imgur.com/2ZiqhE3.png",
+			"thumbnail": "https://i.imgur.com/2ZiqhE3l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Downtown",
+			"author": "Van Mendoza",
+			"url": "https://i.imgur.com/sKizrcp.png",
+			"thumbnail": "https://i.imgur.com/sKizrcpl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Omnicorp",
+			"author": "Irina Iriser",
+			"url": "https://i.imgur.com/Zx11fXx.png",
+			"thumbnail": "https://i.imgur.com/Zx11fXxl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Pinball Wizard",
+			"author": "Joey Banks",
+			"url": "https://i.imgur.com/XpVCRrj.png",
+			"thumbnail": "https://i.imgur.com/XpVCRrjl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Chinatown",
+			"author": "Donny Jiang",
+			"url": "https://i.imgur.com/mz8mTVC.png",
+			"thumbnail": "https://i.imgur.com/mz8mTVCl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "FDR Drive",
+			"author": "Donny Jiang",
+			"url": "https://i.imgur.com/elbdmZk.png",
+			"thumbnail": "https://i.imgur.com/elbdmZkl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Through the Fog",
+			"author": "Zhimai Zhang",
+			"url": "https://i.imgur.com/KQIss5a.png",
+			"thumbnail": "https://i.imgur.com/KQIss5al.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Kids Will Play",
+			"author": "Perry C",
+			"url": "https://i.imgur.com/IieNbdS.png",
+			"thumbnail": "https://i.imgur.com/IieNbdSl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Double Blind",
+			"author": "Pau Casals",
+			"url": "https://i.imgur.com/kKyn0dW.png",
+			"thumbnail": "https://i.imgur.com/kKyn0dWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "All-Seeing Eye",
+			"author": "Alex Rainer",
+			"url": "https://i.imgur.com/HtyCalZ.png",
+			"thumbnail": "https://i.imgur.com/HtyCalZl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Methylene",
+			"author": "Pim Myten",
+			"url": "https://i.imgur.com/vOAYeEW.png",
+			"thumbnail": "https://i.imgur.com/vOAYeEWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Nexus",
+			"author": "Alexander Popov",
+			"url": "https://i.imgur.com/3q2e7N2.png",
+			"thumbnail": "https://i.imgur.com/3q2e7N2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Synthetic",
+			"author": "Leyy M",
+			"url": "https://i.imgur.com/ASKhMFU.png",
+			"thumbnail": "https://i.imgur.com/ASKhMFUl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Nondeterminism",
+			"author": "Alex Perez",
+			"url": "https://i.imgur.com/6dtZBAW.png",
+			"thumbnail": "https://i.imgur.com/6dtZBAWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "In the Beginning",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/gBSjMh2.png",
+			"thumbnail": "https://i.imgur.com/gBSjMh2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "The Swarm",
+			"author": "Vino Li",
+			"url": "https://i.imgur.com/yljYDqp.png",
+			"thumbnail": "https://i.imgur.com/yljYDqpl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Moonrise",
+			"author": "Adrian Swancar",
+			"url": "https://i.imgur.com/NiSCb6W.png",
+			"thumbnail": "https://i.imgur.com/NiSCb6Wl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Cerro",
+			"author": "Tamas Tuzes Katai",
+			"url": "https://i.imgur.com/5u4aM1y.png",
+			"thumbnail": "https://i.imgur.com/5u4aM1yl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		}
+	]
+}

public/assets/phosphor-android/carbon/wallpaper.json

@@ -0,0 +1,409 @@
+{
+	"Collections": [
+		{
+			"name": "Abstract",
+			"preview_url": "https://i.imgur.com/8DTRYwb.png",
+			"preview_thumbnail_url": "https://i.imgur.com/8DTRYwbl.jpg"
+		},
+		{
+			"name": "Architecture",
+			"preview_url":"https://i.imgur.com/t6BTASJ.png",
+			"preview_thumbnail_url": "https://i.imgur.com/t6BTASJl.jpg"
+		},
+		{
+			"name": "Landscape",
+			"preview_url": "https://i.imgur.com/G8cgftc.png",
+			"preview_thumbnail_url": "https://i.imgur.com/G8cgftcl.jpg"
+		},
+		{
+			"name": "Minimal",
+			"preview_url": "https://i.imgur.com/Srt9bP3.png",
+			"preview_thumbnail_url": "https://i.imgur.com/Srt9bP3l.jpg"
+		},
+		{
+			"name": "Solids",
+			"preview_url": "https://i.imgur.com/fzL4yoj.png",
+			"preview_thumbnail_url": "https://i.imgur.com/fzL4yojl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Arctic",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/4qopfYy.png",
+			"thumbnail": "https://i.imgur.com/4qopfYyl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Saffron",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/fzL4yoj.png",
+			"thumbnail": "https://i.imgur.com/fzL4yojl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Heliotrope",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/QsrKIjp.png",
+			"thumbnail": "https://i.imgur.com/QsrKIjpl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Jade",
+			"author": "Phosphor",
+			"url": "https://i.imgur.com/Z29e7f7.png",
+			"thumbnail": "https://i.imgur.com/Z29e7f7l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "solids"
+		},
+		{
+			"name": "Soft Dunes",
+			"author": "Kunj Parekh",
+			"url": "https://i.imgur.com/vIAE5jd.png",
+			"thumbnail": "https://i.imgur.com/vIAE5jdl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscapes"
+		},
+		{
+			"name": "Lake at Dawn",
+			"author": "Max Fuchs",
+			"url": "https://i.imgur.com/4Nmefrv.png",
+			"thumbnail": "https://i.imgur.com/4Nmefrvl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Doors of Perception",
+			"author": "Philipp Berndt",
+			"url": "https://i.imgur.com/Srt9bP3.png",
+			"thumbnail": "https://i.imgur.com/Srt9bP3l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "TwoTone",
+			"author": "Samuel Zeller",
+			"url": "https://i.imgur.com/8DTRYwb.png",
+			"thumbnail": "https://i.imgur.com/8DTRYwbl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Empty Court",
+			"author": "35mm",
+			"url": "https://i.imgur.com/rPSLdCD.png",
+			"thumbnail": "https://i.imgur.com/rPSLdCDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Edge of the Pool",
+			"author": "Autumn Studio",
+			"url": "https://i.imgur.com/qNXWTej.png",
+			"thumbnail": "https://i.imgur.com/qNXWTejl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "One in the Hand",
+			"author": "Rainon Franco",
+			"url": "https://i.imgur.com/QhW4UDc.png",
+			"thumbnail": "https://i.imgur.com/QhW4UDcl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Solitude",
+			"author": "Braxton Stuntz",
+			"url": "https://i.imgur.com/QlQ9tMO.png",
+			"thumbnail": "https://i.imgur.com/QlQ9tMOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Double Fault",
+			"author": "Dane Deaner",
+			"url": "https://i.imgur.com/ERMWJSe.png",
+			"thumbnail": "https://i.imgur.com/ERMWJSel.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Lomo 800",
+			"author": "Markus Spiske",
+			"url": "https://i.imgur.com/bHPWGPQ.png",
+			"thumbnail": "https://i.imgur.com/bHPWGPQl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Clothespins",
+			"author": "Plush Design Studio",
+			"url": "https://i.imgur.com/xPyXBL9.png",
+			"thumbnail": "https://i.imgur.com/xPyXBL9l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Memory Tapes",
+			"author": "Imani Clovis",
+			"url": "https://i.imgur.com/cmWuvUT.png",
+			"thumbnail": "https://i.imgur.com/cmWuvUTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Contours in White",
+			"author": "Jean Philippe del Berghe",
+			"url": "https://i.imgur.com/wjxl9xT.png",
+			"thumbnail": "https://i.imgur.com/wjxl9xTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Awaiting Inspiration",
+			"author": "Joanna Kosinska",
+			"url": "https://i.imgur.com/SBtlZmn.png",
+			"thumbnail": "https://i.imgur.com/SBtlZmnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Succulent",
+			"author": "Khai Sze Ong",
+			"url": "https://i.imgur.com/yDD2wz8.png",
+			"thumbnail": "https://i.imgur.com/yDD2wz8l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Tracks in the Sand",
+			"author": "Ruben Bagues",
+			"url": "https://i.imgur.com/G8cgftc.png",
+			"thumbnail": "https://i.imgur.com/G8cgftcl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape,minimal"
+		},
+		{
+			"name": "Starched Linen",
+			"author": "Annie Spratt",
+			"url": "https://i.imgur.com/W9nAQVR.png",
+			"thumbnail": "https://i.imgur.com/W9nAQVRl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Delamination",
+			"author": "Wesley Tingey",
+			"url": "https://i.imgur.com/VNJ3xWG.png",
+			"thumbnail": "https://i.imgur.com/VNJ3xWGl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Look Up",
+			"author": "Tony Dinh",
+			"url": "https://i.imgur.com/t6BTASJ.png",
+			"thumbnail": "https://i.imgur.com/t6BTASJl.jpgg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Keep to the Right",
+			"author": "hello i m nik",
+			"url": "https://i.imgur.com/SHp6pkv.png",
+			"thumbnail": "https://i.imgur.com/SHp6pkvl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Pink Paper",
+			"author": "Alex Koch",
+			"url": "https://i.imgur.com/OHPR80R.png",
+			"thumbnail": "https://i.imgur.com/OHPR80Rl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Lavender Dunes",
+			"author": "Alex Koch",
+			"url": "https://i.imgur.com/Sb50W4f.png",
+			"thumbnail": "https://i.imgur.com/Sb50W4fl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Cotton Candy Clouds",
+			"author": "Autumn Studio",
+			"url": "https://i.imgur.com/43Vf2hT.png",
+			"thumbnail": "https://i.imgur.com/43Vf2hTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Pineapple",
+			"author": "Pineaaple Supply Co.",
+			"url": "https://i.imgur.com/YK9TyNk.png",
+			"thumbnail": "https://i.imgur.com/YK9TyNkl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Cuttings",
+			"author": "Alex Loup",
+			"url": "https://i.imgur.com/wp2S7TK.png",
+			"thumbnail": "https://i.imgur.com/wp2S7TKl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Textured Ombre Wall",
+			"author": "Bharath G.S.",
+			"url": "https://i.imgur.com/kxBGzva.png",
+			"thumbnail": "https://i.imgur.com/kxBGzval.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "The Loading Dock",
+			"author": "Ph. B.",
+			"url": "https://i.imgur.com/NmL5Ldm.png",
+			"thumbnail": "https://i.imgur.com/NmL5Ldml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Leaning Dwarf Pine",
+			"author": "Caleb George",
+			"url": "https://i.imgur.com/crgckrr.png",
+			"thumbnail": "https://i.imgur.com/crgckrrl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Dunes in Hard Light",
+			"author": "Heather Shevlin",
+			"url": "https://i.imgur.com/LG0G1IO.png",
+			"thumbnail": "https://i.imgur.com/LG0G1IOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "3 Balloons",
+			"author": "Amy Shamblen",
+			"url": "https://i.imgur.com/5HHCh12.png",
+			"thumbnail": "https://i.imgur.com/5HHCh12l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Bicolor Bricks",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/i4VrEDH.png",
+			"thumbnail": "https://i.imgur.com/i4VrEDHl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Acrid Sky",
+			"author": "W",
+			"url": "https://i.imgur.com/RUSz9mM.png",
+			"thumbnail": "https://i.imgur.com/RUSz9mMl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Salmon Colored Smoke",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/8wehlrT.png",
+			"thumbnail": "https://i.imgur.com/8wehlrTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Polygonal Grid",
+			"author": "Scott Webb",
+			"url": "https://i.imgur.com/voUtZhY.png",
+			"thumbnail": "https://i.imgur.com/voUtZhYl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture,minimal"
+		},
+		{
+			"name": "Clay Courts",
+			"author": "Ph. B.",
+			"url": "https://i.imgur.com/yd7OmyV.png",
+			"thumbnail": "https://i.imgur.com/yd7OmyVl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Lavender on Yellow",
+			"author": "Mona Eendra",
+			"url": "https://i.imgur.com/p8T1V7N.png",
+			"thumbnail": "https://i.imgur.com/p8T1V7Nl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,landscape"
+		},
+		{
+			"name": "Whispering Pines",
+			"author": "Mads Schmidt Rasmussen",
+			"url": "https://i.imgur.com/FLkrDVZ.png",
+			"thumbnail": "https://i.imgur.com/FLkrDVZl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "All the Light Touches",
+			"author": "Eberhard Grossgasteiger",
+			"url": "https://i.imgur.com/cwUvsmS.png",
+			"thumbnail": "https://i.imgur.com/cwUvsmSl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		}
+	]
+}

public/assets/phosphor-android/classic/wallpaper.json

@@ -0,0 +1,350 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "https://i.imgur.com/xBCTxrP.png",
+			"preview_thumbnail_url": "https://i.imgur.com/xBCTxrPl.jpg"
+		},
+		{
+			"name": "architecture",
+			"preview_url": "https://i.imgur.com/pdV0KQ1.png",
+			"preview_thumbnail_url": "https://i.imgur.com/pdV0KQ1l.jpg"
+		},
+		{
+			"name": "landscape",
+			"preview_url": "https://i.imgur.com/EEBaeFE.png",
+			"preview_thumbnail_url": "https://i.imgur.com/EEBaeFEl.jpg"
+		},
+		{
+			"name": "minimal",
+			"preview_url": "https://i.imgur.com/peX5qVO.png",
+			"preview_thumbnail_url": "https://i.imgur.com/peX5qVOl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Dunes at Dusk",
+			"author": "Jeremy Bishop",
+			"url": "https://i.imgur.com/EEBaeFE.png",
+			"thumbnail": "https://i.imgur.com/EEBaeFEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Black Sand",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/Yt8zaUn.png",
+			"thumbnail": "https://i.imgur.com/Yt8zaUnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Disappearing Coastline",
+			"author": "Chris Coe",
+			"url": "https://i.imgur.com/hq4aENh.png",
+			"thumbnail": "https://i.imgur.com/hq4aENhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,landscape"
+		},
+		{
+			"name": "Setting Out",
+			"author": "Tim Trad",
+			"url": "https://i.imgur.com/42uDJkj.png",
+			"thumbnail": "https://i.imgur.com/42uDJkjl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Dark Tides",
+			"author": "Mike Yukhtenko",
+			"url": "https://i.imgur.com/XSIIUAQ.png",
+			"thumbnail": "https://i.imgur.com/XSIIUAQl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Rogue Wave",
+			"author": "Jack B",
+			"url": "https://i.imgur.com/YVHtCTT.png",
+			"thumbnail": "https://i.imgur.com/YVHtCTTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Strata",
+			"author": "Joshua Oluwagbemiga",
+			"url": "https://i.imgur.com/uvRONTa.png",
+			"thumbnail": "https://i.imgur.com/uvRONTal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Condolences",
+			"author": "Annie Spratt",
+			"url": "https://i.imgur.com/peX5qVO.png",
+			"thumbnail": "https://i.imgur.com/peX5qVOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Ferns",
+			"author": "Andras Vas",
+			"url": "https://i.imgur.com/wXvAISN.png",
+			"thumbnail": "https://i.imgur.com/wXvAISNl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Blades of Grass",
+			"author": "Claudio Testa",
+			"url": "https://i.imgur.com/0QOoq8R.png",
+			"thumbnail": "https://i.imgur.com/0QOoq8Rl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Lush",
+			"author": "Ian Espinosa",
+			"url": "https://i.imgur.com/AumRAb4.png",
+			"thumbnail": "https://i.imgur.com/AumRAb4l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Amethyst Bloom",
+			"author": "Alyssa Smith",
+			"url": "https://i.imgur.com/96JmZIF.png",
+			"thumbnail": "https://i.imgur.com/96JmZIFl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Carbon",
+			"author": "David Jorre",
+			"url": "https://i.imgur.com/hkN3ioi.png",
+			"thumbnail": "https://i.imgur.com/hkN3ioil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Charred Remains",
+			"author": "Brian Patrick Tagalog",
+			"url": "https://i.imgur.com/SbyCpR2.png",
+			"thumbnail": "https://i.imgur.com/SbyCpR2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Make a Wish",
+			"author": "Wil Stewart",
+			"url": "https://i.imgur.com/VeuzvUA.png",
+			"thumbnail": "https://i.imgur.com/VeuzvUAl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Resonance",
+			"author": "Luke Stackpoole",
+			"url": "https://i.imgur.com/94SjlPi.png",
+			"thumbnail": "https://i.imgur.com/94SjlPil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "An Endless Mist",
+			"author": "Yoal Desurmont",
+			"url": "https://i.imgur.com/Qkng6Dm.png",
+			"thumbnail": "https://i.imgur.com/Qkng6Dml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Elevation",
+			"author": "Manuel Will",
+			"url": "https://i.imgur.com/yQMGOAb.png",
+			"thumbnail": "https://i.imgur.com/yQMGOAbl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Rock Show",
+			"author": "Raphael Schaller",
+			"url": "https://i.imgur.com/DMi6ffB.png",
+			"thumbnail": "https://i.imgur.com/DMi6ffBl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Motes",
+			"author": "Samuel Zeller",
+			"url": "https://i.imgur.com/kOIWSNJ.png",
+			"thumbnail": "https://i.imgur.com/kOIWSNJl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Birds on a Wire",
+			"author": "Adrian Kirkegaard",
+			"url": "https://i.imgur.com/M3dlKS4.png",
+			"thumbnail": "https://i.imgur.com/M3dlKS4l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Interleaved",
+			"author": "Ron Whitaker",
+			"url": "https://i.imgur.com/QQ7WQvD.png",
+			"thumbnail": "https://i.imgur.com/QQ7WQvDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Elliptic",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/xBCTxrP.png",
+			"thumbnail": "https://i.imgur.com/xBCTxrPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Convergence",
+			"author": "Josh Rose",
+			"url": "https://i.imgur.com/uqBhWYH.png",
+			"thumbnail": "https://i.imgur.com/uqBhWYHl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Baffles",
+			"author": "Elena Saharova",
+			"url": "https://i.imgur.com/l2L6u1E.png",
+			"thumbnail": "https://i.imgur.com/l2L6u1El.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Polygonal",
+			"author": "Carrie Yang",
+			"url": "https://i.imgur.com/pdV0KQ1.png",
+			"thumbnail": "https://i.imgur.com/pdV0KQ1l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "S-Curve",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/Y1A9GTi.png",
+			"thumbnail": "https://i.imgur.com/Y1A9GTil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Galaxy Swirls",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/KrxLGxy.png",
+			"thumbnail": "https://i.imgur.com/KrxLGxyl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Prismatic Dreams",
+			"author": "Sean Sinclair",
+			"url": "https://i.imgur.com/byLsXXB.png",
+			"thumbnail": "https://i.imgur.com/byLsXXBl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Slot Canyon",
+			"author": "Meric Dagli",
+			"url": "https://i.imgur.com/hB90xvB.png",
+			"thumbnail": "https://i.imgur.com/hB90xvBl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Crescent Moonrise",
+			"author": "Val Vesa",
+			"url": "https://i.imgur.com/nfoPdRd.png",
+			"thumbnail": "https://i.imgur.com/nfoPdRdl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Eye of the Storm",
+			"author": "Breno Machado",
+			"url": "https://i.imgur.com/BliGpTl.png",
+			"thumbnail": "https://i.imgur.com/BliGpTll.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Thundercloud",
+			"author": "Bryan Minear",
+			"url": "https://i.imgur.com/mK8JE0t.png",
+			"thumbnail": "https://i.imgur.com/mK8JE0tl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Departmental Security",
+			"author": "Bartosz Wanot",
+			"url": "https://i.imgur.com/wRN7lDd.png",
+			"thumbnail": "https://i.imgur.com/wRN7lDdl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "CMatrix",
+			"author": "Maekus Spiske",
+			"url": "https://i.imgur.com/QAsjQkP.png",
+			"thumbnail": "https://i.imgur.com/QAsjQkPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Neon Serif",
+			"author": "Zuzanna Adamcyzk",
+			"url": "https://i.imgur.com/3edF6DE.png",
+			"thumbnail": "https://i.imgur.com/3edF6DEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		}
+	]
+}

public/assets/phosphor-android/helium/wallpaper.json

@@ -0,0 +1,422 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		},
+		{
+			"name": "architecture",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		},
+		{
+			"name": "landscape",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		},
+		{
+			"name": "minimal",
+			"preview_url": "",
+			"preview_thumbnail_url": ""
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Retro Sunrise",
+			"author": "Maxim Medvedev",
+			"url": "https://i.imgur.com/kCtyGwT.png",
+			"thumbnail": "https://i.imgur.com/kCtyGwTl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Tawny Peak",
+			"author": "Andreas Kind",
+			"url": "https://i.imgur.com/fqxcpJU.png",
+			"thumbnail": "https://i.imgur.com/fqxcpJUl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "First Light",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/EakVjSC.png",
+			"thumbnail": "https://i.imgur.com/EakVjSCl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Rosy Dunes",
+			"author": "Paxel Nolbert",
+			"url": "https://i.imgur.com/lD06npE.png",
+			"thumbnail": "https://i.imgur.com/lD06npEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Waking Up",
+			"author": "Dhaval Parmar",
+			"url": "https://i.imgur.com/eBenVs8.png",
+			"thumbnail": "https://i.imgur.com/eBenVs8l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "The Great Outdoors",
+			"author": "Gauravdeep Singh Bansal",
+			"url": "https://i.imgur.com/gJ40ptR.png",
+			"thumbnail": "https://i.imgur.com/gJ40ptRl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Make a Wish",
+			"author": "Diego Ph",
+			"url": "https://i.imgur.com/vJagBNf.png",
+			"thumbnail": "https://i.imgur.com/vJagBNfl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Lateral Strike",
+			"author": "Damon Lam",
+			"url": "https://i.imgur.com/BeZHVcY.png",
+			"thumbnail": "https://i.imgur.com/BeZHVcYl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Starfield",
+			"author": "Guilherme Stecanella",
+			"url": "https://i.imgur.com/pDjDeVr.png",
+			"thumbnail": "https://i.imgur.com/pDjDeVrl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Smallness",
+			"author": "Melanie Magdalena",
+			"url": "https://i.imgur.com/658blVF.png",
+			"thumbnail": "https://i.imgur.com/658blVFl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Alone at the Summit",
+			"author": "Aleks Dahlberg",
+			"url": "https://i.imgur.com/YKeQ9sc.png",
+			"thumbnail": "https://i.imgur.com/YKeQ9scl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Like Waves",
+			"author": "Calvin Ma",
+			"url": "https://i.imgur.com/wbNiiie.png",
+			"thumbnail": "https://i.imgur.com/wbNiiiel.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Cloud Cover",
+			"author": "Adrian",
+			"url": "https://i.imgur.com/02uf66E.png",
+			"thumbnail": "https://i.imgur.com/02uf66El.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Tiled",
+			"author": "Fabrizio Conti",
+			"url": "https://i.imgur.com/mAfbAsG.png",
+			"thumbnail": "https://i.imgur.com/mAfbAsGl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,architecture"
+		},
+		{
+			"name": "Brutalism",
+			"author": "Andrej Lisakov",
+			"url": "https://i.imgur.com/9JlGo4m.png",
+			"thumbnail": "https://i.imgur.com/9JlGo4ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,architecture"
+		},
+		{
+			"name": "Arrayed",
+			"author": "Robert Haverly",
+			"url": "https://i.imgur.com/SGA180g.png",
+			"thumbnail": "https://i.imgur.com/SGA180gl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal,architecture"
+		},
+		{
+			"name": "Placidity",
+			"author": "Julian Bock",
+			"url": "https://i.imgur.com/T7PwRnh.png",
+			"thumbnail": "https://i.imgur.com/T7PwRnhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Sea Change",
+			"author": "Samara Doole",
+			"url": "https://i.imgur.com/ekcUJ2M.png",
+			"thumbnail": "https://i.imgur.com/ekcUJ2Ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Choppy",
+			"author": "Imleedh Ali",
+			"url": "https://i.imgur.com/2bk3vxM.png",
+			"thumbnail": "https://i.imgur.com/2bk3vxMl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Below the Crush",
+			"author": "Jeremy Bishop",
+			"url": "https://i.imgur.com/h244SGI.png",
+			"thumbnail": "https://i.imgur.com/h244SGIl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Betta",
+			"author": "Aung Soe Min",
+			"url": "https://i.imgur.com/YOBYine.png",
+			"thumbnail": "https://i.imgur.com/YOBYinel.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Last One in the Pack",
+			"author": "Alfaz Sayed",
+			"url": "https://i.imgur.com/tP0SOFS.png",
+			"thumbnail": "https://i.imgur.com/tP0SOFSl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Basement Window",
+			"author": "Taylor Young",
+			"url": "https://i.imgur.com/V7srimE.png",
+			"thumbnail": "https://i.imgur.com/V7srimEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Cellular",
+			"author": "Christina Kirschnerova",
+			"url": "https://i.imgur.com/lePTybt.png",
+			"thumbnail": "https://i.imgur.com/lePTybtl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Ignition",
+			"author": "Roland Larsson",
+			"url": "https://i.imgur.com/v4si6N2.png",
+			"thumbnail": "https://i.imgur.com/v4si6N2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Falling Light",
+			"author": "Rene Bohmer",
+			"url": "https://i.imgur.com/1U953Cb.png",
+			"thumbnail": "https://i.imgur.com/1U953Cbl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Vices",
+			"author": "Jaredd Craig",
+			"url": "https://i.imgur.com/a2xwnHK.png",
+			"thumbnail": "https://i.imgur.com/a2xwnHKl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Your Worst Nightmare",
+			"author": "Elti Meshau",
+			"url": "https://i.imgur.com/9ajAMtL.png",
+			"thumbnail": "https://i.imgur.com/9ajAMtLl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Tail Lights",
+			"author": "Shaunak Mirashi",
+			"url": "https://i.imgur.com/tL6d50t.png",
+			"thumbnail": "https://i.imgur.com/tL6d50tl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Rapid Transit",
+			"author": "Kevin Clyde Berbano",
+			"url": "https://i.imgur.com/JxXJxDZ.png",
+			"thumbnail": "https://i.imgur.com/JxXJxDZl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Storms Ahead",
+			"author": "Luke Stackpoole",
+			"url": "https://i.imgur.com/ZBMCKbt.png",
+			"thumbnail": "https://i.imgur.com/ZBMCKbtl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Truss",
+			"author": "Phil Botha",
+			"url": "https://i.imgur.com/q4qNcui.png",
+			"thumbnail": "https://i.imgur.com/q4qNcuil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "T",
+			"author": "Joshua Rivera",
+			"url": "https://i.imgur.com/84O8dFa.png",
+			"thumbnail": "https://i.imgur.com/84O8dFal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture,minimal"
+		},
+		{
+			"name": "Shadows on the Wall",
+			"author": "Rene Bohmer",
+			"url": "https://i.imgur.com/09GgsVW.png",
+			"thumbnail": "https://i.imgur.com/09GgsVWl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Fluid Dynamics",
+			"author": "Pawel Czerwinski",
+			"url": "https://i.imgur.com/AaD8SLO.png",
+			"thumbnail": "https://i.imgur.com/AaD8SLOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Ombre",
+			"author": "Elliott Engelmann",
+			"url": "https://i.imgur.com/5jsq9Jg.png",
+			"thumbnail": "https://i.imgur.com/5jsq9Jgl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Black Sand",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/Yt8zaUn.png",
+			"thumbnail": "https://i.imgur.com/Yt8zaUnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Carbon",
+			"author": "David Jorre",
+			"url": "https://i.imgur.com/hkN3ioi.png",
+			"thumbnail": "https://i.imgur.com/hkN3ioil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Charred Remains",
+			"author": "Brian Patrick Tagalog",
+			"url": "https://i.imgur.com/SbyCpR2.png",
+			"thumbnail": "https://i.imgur.com/SbyCpR2l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,minimal"
+		},
+		{
+			"name": "Water Fountain",
+			"author": "Quin Stevenson",
+			"url": "https://i.imgur.com/Bz5u4HA.png",
+			"thumbnail": "https://i.imgur.com/Bz5u4HAl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "minimal"
+		},
+		{
+			"name": "Interleaved",
+			"author": "Ron Whitaker",
+			"url": "https://i.imgur.com/QQ7WQvD.png",
+			"thumbnail": "https://i.imgur.com/QQ7WQvDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Elliptic",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/xBCTxrP.png",
+			"thumbnail": "https://i.imgur.com/xBCTxrPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Convergence",
+			"author": "Josh Rose",
+			"url": "https://i.imgur.com/uqBhWYH.png",
+			"thumbnail": "https://i.imgur.com/uqBhWYHl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "S-Curve",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/Y1A9GTi.png",
+			"thumbnail": "https://i.imgur.com/Y1A9GTil.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		}
+	]
+}

public/assets/phosphor-android/krypton/wallpaper.json

@@ -0,0 +1,207 @@
+{
+	"Collections": [
+		{
+			"name": "abstract",
+			"preview_url": "https://i.imgur.com/xBCTxrP.png",
+			"preview_thumbnail_url": "https://i.imgur.com/xBCTxrPl.jpg"
+		},
+		{
+			"name": "architecture",
+			"preview_url": "https://i.imgur.com/pdV0KQ1.png",
+			"preview_thumbnail_url": "https://i.imgur.com/pdV0KQ1l.jpg"
+		},
+		{
+			"name": "landscape",
+			"preview_url": "https://i.imgur.com/EEBaeFE.png",
+			"preview_thumbnail_url": "https://i.imgur.com/EEBaeFEl.jpg"
+		},
+		{
+			"name": "minimal",
+			"preview_url": "https://i.imgur.com/peX5qVO.png",
+			"preview_thumbnail_url": "https://i.imgur.com/peX5qVOl.jpg"
+		}
+	],
+	"Wallpapers": [
+		{
+			"name": "Echoes Of",
+			"author": "Zoltan Tasi",
+			"url": "https://i.imgur.com/OVKso33.png",
+			"thumbnail": "https://i.imgur.com/OVKso33l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Gradient #4B",
+			"author": "Luke Chesser",
+			"url": "https://i.imgur.com/iFrJbfE.png",
+			"thumbnail": "https://i.imgur.com/iFrJbfEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Orthogonal",
+			"author": "Etienne Beauregard",
+			"url": "https://i.imgur.com/cFyjq7V.png",
+			"thumbnail": "https://i.imgur.com/cFyjq7Vl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Filters Through",
+			"author": "Martin Adams",
+			"url": "https://i.imgur.com/r7MFJxM.png",
+			"thumbnail": "https://i.imgur.com/r7MFJxMl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Gehry",
+			"author": "Sascha Yeryomin",
+			"url": "https://i.imgur.com/jf5NX7F.png",
+			"thumbnail": "https://i.imgur.com/jf5NX7Fl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "The Benevolent Corp.",
+			"author": "Alex Iby",
+			"url": "https://i.imgur.com/SrgJtef.png",
+			"thumbnail": "https://i.imgur.com/SrgJtefl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Bokehd",
+			"author": "Kristaps Solims",
+			"url": "https://i.imgur.com/HzU9KSK.png",
+			"thumbnail": "https://i.imgur.com/HzU9KSKl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Confluence",
+			"author": "Ash Edmonds",
+			"url": "https://i.imgur.com/HWwYY1t.png",
+			"thumbnail": "https://i.imgur.com/HWwYY1tl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "What Lies Beyond",
+			"author": "Cheng Feng",
+			"url": "https://i.imgur.com/BjdQkxh.png",
+			"thumbnail": "https://i.imgur.com/BjdQkxhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Stairstep",
+			"author": "Dawid Sokolowski",
+			"url": "https://i.imgur.com/VXzW2tV.png",
+			"thumbnail": "https://i.imgur.com/VXzW2tVl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Bluesmoke",
+			"author": "Albert Bleeker",
+			"url": "https://i.imgur.com/mrltonO.png",
+			"thumbnail": "https://i.imgur.com/mrltonOl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Tensegrity",
+			"author": "Luca Bravo",
+			"url": "https://i.imgur.com/N69Gk81.png",
+			"thumbnail": "https://i.imgur.com/N69Gk81l.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "architecture"
+		},
+		{
+			"name": "Vertical Integration",
+			"author": "Pawl Czerwinski",
+			"url": "https://i.imgur.com/rWVitPA.png",
+			"thumbnail": "https://i.imgur.com/rWVitPAl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "T",
+			"author": "Joshua Rivera",
+			"url": "https://i.imgur.com/84O8dFa.png",
+			"thumbnail": "https://i.imgur.com/84O8dFal.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Ripples",
+			"author": "Julian Bock",
+			"url": "https://i.imgur.com/T7PwRnh.png",
+			"thumbnail": "https://i.imgur.com/T7PwRnhl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Light Speed",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/cprtb1M.png",
+			"thumbnail": "https://i.imgur.com/cprtb1Ml.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract"
+		},
+		{
+			"name": "Dunes at Dusk",
+			"author": "Jeremy Bishop",
+			"url": "https://i.imgur.com/EEBaeFE.png",
+			"thumbnail": "https://i.imgur.com/EEBaeFEl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+		{
+			"name": "Black Sand",
+			"author": "Adrien Olichon",
+			"url": "https://i.imgur.com/Yt8zaUn.png",
+			"thumbnail": "https://i.imgur.com/Yt8zaUnl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "landscape"
+		},
+
+		{
+			"name": "Interleaved",
+			"author": "Ron Whitaker",
+			"url": "https://i.imgur.com/QQ7WQvD.png",
+			"thumbnail": "https://i.imgur.com/QQ7WQvDl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+		{
+			"name": "Elliptic",
+			"author": "Tobias van Schneider",
+			"url": "https://i.imgur.com/xBCTxrP.png",
+			"thumbnail": "https://i.imgur.com/xBCTxrPl.jpg",
+			"downloadable": true,
+			"copyright": "CC0",
+			"collections": "abstract,architecture"
+		},
+	]
+}

public/manifest.json

@@ -18,6 +18,13 @@
       "sizes": "512x512"
     }
   ],
+  "permissions": [
+    "http://*/*",
+    "https://*/*",
+    "clipboardRead",
+    "clipboardWrite",
+    "storage"
+  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#35313D",

src/components/App/App.css

@@ -15,10 +15,10 @@ h2 {
 }
 
 img {
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -webkit-user-drag: none;
+  user-select: none;
 }
 
 pre,
@@ -65,9 +65,10 @@ button.main-button {
   transform: translate(0, 0);
   transition: all 0.2s ease;
   cursor: pointer;
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  -webkit-user-drag: none;
+  user-select: none;
   margin: 0 24px 24px 0;
 }
 
@@ -108,8 +109,22 @@ a.main-link:after {
   width: 100%;
   border-bottom: 1px solid black;
   transition: 0.2s;
+  pointer-events: none;
 }
 
 a.main-link:hover:after {
   width: 0%;
 }
+
+.badge.new {
+  color: #ff6e60;
+}
+
+.badge.updated {
+  color: #397fff;
+}
+
+.badge {
+  font-size: 24px;
+  line-height: 0.5em;
+}

src/components/App/App.tsx

@@ -7,12 +7,16 @@ import IconGrid from "../IconGrid/IconGrid";
 import Footer from "../Footer/Footer";
 import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
 import Notice from "../Notice/Notice";
+import useIconParameters from "../../hooks/useIconParameters";
+import usePersistSettings from "../../hooks/usePersistSettings";
 
 const errorFallback = <Notice message="Search error" />;
-// const waitingFallback = <Notice type="wait" message="Loading..." />;
 const waitingFallback = <Notice type="none" message="" />;
 
 const App: React.FC<any> = () => {
+  useIconParameters();
+  usePersistSettings();
+
   return (
     <React.StrictMode>
       <Header />

src/components/ColorInput/ColorInput.css

@@ -16,10 +16,11 @@
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  user-select: none;
   pointer-events: none;
+  text-transform: uppercase;
 }
 
 input.color-input {

src/components/Footer/Footer.css

@@ -48,9 +48,9 @@ footer .links {
 
 .illustrations-footer {
   display: none;
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  user-select: none;
   pointer-events: none;
 }
 

src/components/Header/Header.css

@@ -60,7 +60,7 @@ header {
     top: -158px;
   }
 
-  #billiard-ball {
+  .billiard-ball {
     position: absolute;
     left: 132px;
     top: -98px;
@@ -72,13 +72,13 @@ header {
     top: 152px;
   }
 
-  #warning {
+  .warning {
     position: absolute;
     left: 394px;
     top: -304px;
   }
 
-  #tablet {
+  .tablet {
     position: absolute;
     left: 672px;
     top: -900px;
@@ -94,18 +94,18 @@ header {
     height: 612px;
   }
 
-  #cutting-mat {
+  .cutting-mat {
     position: absolute;
     left: 96px;
   }
 
-  #receipt {
+  .receipt {
     position: absolute;
     left: -36px;
     top: 190px;
   }
 
-  #calculator {
+  .calculator {
     position: absolute;
     left: 632px;
     top: 170px;
@@ -131,7 +131,7 @@ header {
     top: -158px;
   }
 
-  #billiard-ball {
+  .billiard-ball {
     position: absolute;
     left: 900px;
     top: 400px;
@@ -148,30 +148,30 @@ header {
     top: 694px;
   }
 
-  #warning {
+  .warning {
     position: absolute;
     left: 1170px;
     top: 400px;
   }
 
-  #tablet {
+  .tablet {
     position: absolute;
     left: 578px;
     top: -900px;
   }
 
-  #cutting-mat {
+  .cutting-mat {
     position: absolute;
     left: 120px;
   }
 
-  #receipt {
+  .receipt {
     position: absolute;
     left: -16px;
     top: 190px;
   }
 
-  #calculator {
+  .calculator {
     position: absolute;
     left: 924px;
     top: 114px;

src/components/Header/Header.tsx

@@ -41,22 +41,22 @@ const Header: React.FC<HeaderProps> = () => {
           <img src={markerPurple} id="marker-purple" alt="" />
           <img src={paperclips} id="paperclips" alt="" />
           <img src={paperclipsThree} id="paperclips-three" alt="" />
-          <img id="tablet" src={tabletSpec} alt="" />
+          <img className="tablet" src={tabletSpec} alt="" />
-          <img id="tablet" className="inspectable xray" src={tablet} alt="" />
+          <img className="tablet inspectable xray" src={tablet} alt="" />
-          <img id="billiard-ball" src={billiardBallSpec} alt="" />
+          <img className="billiard-ball" src={billiardBallSpec} alt="" />
           <img
-            id="billiard-ball"
+            className="billiard-ball inspectable xray"
-            className="inspectable xray"
             src={billiardBall}
             alt=""
           />
 
-          <img id="warning" src={warningSpec} alt="" />
+          <img className="warning" src={warningSpec} alt="" />
-          <img id="warning" className="inspectable xray" src={warning} alt="" />
+          <img className="warning inspectable xray" src={warning} alt="" />
         </div>
         <div className="intro">
           <h2>
-            Phosphor is a flexible icon family for interfaces, diagrams, presentations — 
+            Phosphor is a flexible icon family for interfaces, diagrams,
+            presentations — 
             <wbr />
             whatever, really.
           </h2>
@@ -73,19 +73,17 @@ const Header: React.FC<HeaderProps> = () => {
           <Links />
         </div>
         <div className="illustrations-bottom">
-          <img id="cutting-mat" src={cuttingMatSpec} alt="" />
+          <img className="cutting-mat" src={cuttingMatSpec} alt="" />
           <img
-            id="cutting-mat"
+            className="cutting-mat inspectable xray"
-            className="inspectable xray"
             src={cuttingMat}
             alt=""
           />
-          <img id="receipt" src={receiptSpec} alt="" />
+          <img className="receipt" src={receiptSpec} alt="" />
-          <img id="receipt" className="inspectable xray" src={receipt} alt="" />
+          <img className="receipt inspectable xray" src={receipt} alt="" />
-          <img id="calculator" src={calculatorSpec} alt="" />
+          <img className="calculator" src={calculatorSpec} alt="" />
           <img
-            id="calculator"
+            className="calculator inspectable xray"
-            className="inspectable xray"
             src={calculator}
             alt=""
           />

src/components/IconGrid/DetailsPanel.tsx

@@ -20,22 +20,22 @@ const panelVariants = {
   open: {
     opacity: 1,
     height: "100%",
-    marginTop: 4,
+    marginTop: "4px",
-    marginBottom: 4,
+    marginBottom: "4px",
-    // transition: { stiffness: 600, damping: 32, duration: 0.2 },
+    transition: { type: "tween", duration: 0.1 },
   },
   collapsed: {
     opacity: 0,
-    height: 0,
+    height: "0px",
-    marginTop: 0,
+    marginTop: "0px",
-    marginBottom: 0,
+    marginBottom: "0px",
-    // transition: { stiffness: 600, damping: 32, duration: 0.2 },
+    transition: { type: "tween", duration: 0.1 },
   },
 };
 
 const contentVariants = {
-  open: { opacity: 1, transition: { duration: 0.2 } },
+  open: { opacity: 1, transition: { duration: 0.2, delay: 0.1 } },
-  collapsed: { opacity: 0, transition: { duration: 0.1 } },
+  collapsed: { opacity: 0, transition: { duration: 0 } },
 };
 
 const buttonColor = "#35313D";
@@ -242,6 +242,7 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
         animate="open"
         exit="collapsed"
         variants={contentVariants}
+        title="Close"
       >
         <X
           className="close-icon"

src/components/IconGrid/IconGrid.css

@@ -22,9 +22,9 @@
   justify-content: center;
   margin: 4px;
   border-radius: 16px;
-  user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
+  user-select: none;
   cursor: pointer;
   /* transition: background-color 100ms ease; */
 }
@@ -46,6 +46,24 @@
   text-align: center;
 }
 
+@media screen and (max-width: 536px) {
+  .grid-container {
+    padding: 32px 8px;
+  }
+
+  .grid-item {
+    width: 108px;
+    height: unset;
+    padding: 4px 0;
+    justify-content: flex-start;
+    border: 2px solid transparent;
+  }
+
+  .grid-item p {
+    padding: 0 4px;
+  }
+}
+
 .info-box {
   position: relative;
   display: flex;
@@ -64,6 +82,10 @@
   .icon-usage {
     padding-left: 10% !important;
   }
+
+  .snippet pre {
+    padding: 12px 8px 12px 20px;
+  }
 }
 
 .icon-preview {
@@ -95,9 +117,9 @@
   align-items: center;
   text-overflow: ellipsis;
   color: black;
-  user-select: all;
   -moz-user-select: all;
   -webkit-user-select: all;
+  user-select: all;
 }
 
 .snippet pre:focus {
@@ -106,9 +128,9 @@
 
 @keyframes select {
   to {
-    user-select: text;
     -moz-user-select: text;
     -webkit-user-select: text;
+    user-select: text;
   }
 }
 

src/components/IconGrid/IconGrid.tsx

@@ -14,7 +14,15 @@ import TagCloud from "./TagCloud";
 import Notice from "../Notice/Notice";
 import "./IconGrid.css";
 
-const defaultSearchTags = ["*new*", "communication", "editor", "emoji", "maps", "weather"];
+const defaultSearchTags = [
+  "*new*",
+  "*updated*",
+  "communication",
+  "editor",
+  "emoji",
+  "maps",
+  "weather",
+];
 
 type IconGridProps = {};
 

src/components/IconGrid/IconGridItem.tsx

@@ -25,7 +25,7 @@ const delayPerPixel = 0.0004;
 
 const itemVariants = {
   hidden: { opacity: 0 },
-  visible: (delayRef: any) => ({
+  visible: (delayRef: MutableRefObject<number>) => ({
     opacity: 1,
     transition: { delay: delayRef.current },
   }),
@@ -36,6 +36,8 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
   const { name, Icon } = entry;
   const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
   const isOpen = open === name;
+  const isNew = entry.tags.includes("*new*");
+  const isUpdated = entry.tags.includes("*updated*");
   const delayRef = useRef<number>(0);
   const offset = useRef({ top: 0, left: 0 });
   const ref = useRef<any>();
@@ -84,7 +86,11 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         onClick={handleOpen}
       >
         <Icon />
-        <p>{name}</p>
+        <p>
+          {name}
+          {isNew && <span className="badge new">•</span>}
+          {isUpdated && <span className="badge updated">•</span>}
+        </p>
       </motion.div>
       <AnimatePresence initial={false}>
         {isOpen && <DetailsPanel {...props} />}

src/components/IconGrid/TagCloud.tsx

@@ -29,6 +29,8 @@ const TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => {
           onClick={() => void handleTagClick(tag)}
         >
           <code className={`${isDark ? "dark" : ""}`}>{tag}</code>
+          {tag === "*new*" && <span className="badge new">•</span>}
+          {tag === "*updated*" && <span className="badge updated">•</span>}
         </button>
       ))}
     </div>

src/components/Links/Links.tsx

@@ -43,36 +43,19 @@ const Links: React.FC<LinksProps> = () => {
           </OutboundLink>
         </span>
       </div>
-      {/* <div>
-        <ArrowElbowDownRight size={24} />
-        <OutboundLink
-          className="nav-link"
-          to="https://www.figma.com/file/xMCDSp5g0g7Fw8aMyAdVVr/Phosphor-Icon-Library-0.6.0"
-          eventLabel="Figma library"
-        >
-          Figma library
-        </OutboundLink>
-      </div>
       <div>
         <ArrowElbowDownRight size={24} />
         <OutboundLink
           className="nav-link"
-          to="https://www.figma.com/community/plugin/892854133443228626/Phosphor-Icons"
+          to="https://phosphoricons.com/assets/phosphor-icons.sketchplugin.zip"
-          eventLabel="Figma plugin"
+          eventLabel="Download sketch plugin"
+          download
+          type="application/zip"
         >
-          Figma plugin
+          Sketch plugin
         </OutboundLink>
-      </div> */}
-      <div>
-        <ArrowElbowDownRight size={24} />
-        <a
-          className="nav-link"
-          href="https://github.com/phosphor-icons/phosphor-home/issues"
-        >
-          Request an icon
-        </a>
       </div>
-      {/* <div>
+      <div>
         <ArrowElbowDownRight size={24} />
         <span>
           <a className="nav-link" href="https://paypal.me/minoraxis">
@@ -83,8 +66,8 @@ const Links: React.FC<LinksProps> = () => {
             Patreon
           </a>
         </span>
-      </div> */}
+      </div>
-      <div>
+      {/* <div>
         <ArrowElbowDownRight size={24} />
         <a className="nav-link" href="https://paypal.me/minoraxis">
           Donate on PayPal
@@ -96,6 +79,7 @@ const Links: React.FC<LinksProps> = () => {
           Support us on Patreon
         </a>
       </div>
+    */}
       <div>
         <ArrowElbowDownRight size={24} />
         <a
@@ -105,6 +89,15 @@ const Links: React.FC<LinksProps> = () => {
           GitHub
         </a>
       </div>
+      <div>
+        <ArrowElbowDownRight size={24} />
+        <a
+          className="nav-link"
+          href="https://github.com/phosphor-icons/phosphor-home/issues"
+        >
+          Request an icon
+        </a>
+      </div>
     </div>
   );
 };

src/components/SearchInput/SearchInput.css

@@ -15,11 +15,15 @@
   background-color: white !important;
 }
 
+.search-bar:focus-within .keys {
+  display: none;
+}
+
 .search-bar input {
   height: 100%;
   flex: 1;
   border: none;
-  margin-left: 12px;
+  margin: 0 12px;
   padding: 0;
   font-size: 16px;
   color: white;
@@ -48,6 +52,17 @@
   cursor: wait;
 }
 
+.keys {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  min-width: 42px;
+  font-size: 12px;
+}
+
 @media screen and (max-width: 558px) {
   #search-icon {
     display: none;
@@ -58,3 +73,9 @@
     width: 60%;
   }
 }
+
+@media screen and (min-width: 858px) and (max-width: 1100px) {
+  .search-bar {
+    flex-basis: 320px;
+  }
+}

src/components/SearchInput/SearchInput.tsx

@@ -1,17 +1,33 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, MutableRefObject } from "react";
 import { useRecoilState } from "recoil";
 import { useDebounce } from "react-use";
-import { MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
 import ReactGA from "react-ga";
 
 import { searchQueryAtom } from "../../state/atoms";
 import "./SearchInput.css";
 
+const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
+const isApple = apple.test(window.navigator.platform);
+
+const mobile = /Android|iPhone|iPod|iPad|Opera Mini|IEMobile/i;
+const isMobile = mobile.test(window.navigator.userAgent);
+
 type SearchInputProps = {};
 
 const SearchInput: React.FC<SearchInputProps> = () => {
   const [value, setValue] = useState<string>("");
   const [query, setQuery] = useRecoilState(searchQueryAtom);
+  const inputRef = useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>;
+
+  useHotkeys("ctrl+k,cmd+k", (e) => {
+    e.preventDefault();
+    if (!e.repeat) {
+      inputRef.current?.focus();
+      inputRef.current.select();
+    }
+  });
 
   /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
@@ -28,13 +44,15 @@ const SearchInput: React.FC<SearchInputProps> = () => {
     () => {
       if (value !== query) {
         setQuery(value);
-        !!value && ReactGA.event({ category: "Search", action: "Query", label: value });
+        !!value &&
+          ReactGA.event({ category: "Search", action: "Query", label: value });
       }
-      !!value && void document
+      !!value &&
+        void document
           .getElementById("beacon")
           ?.scrollIntoView({ block: "start", behavior: "smooth" });
     },
-    250,
+    500,
     [value]
   );
 
@@ -49,6 +67,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
     <div className="search-bar">
       <MagnifyingGlass id="search-icon" size={24} />
       <input
+        ref={inputRef}
         id="search-input"
         title="Search for icon names, categories, or keywords"
         aria-label="Search for an icon"
@@ -62,6 +81,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
           key === "Enter" && currentTarget.blur()
         }
       />
+      {!value && !isMobile && <Keys>{isApple ? <Command /> : "Ctrl + "}K</Keys>}
       {value ? (
         isReady() ? (
           <X className="clear-icon" size={18} onClick={handleCancelSearch} />
@@ -73,4 +93,8 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   );
 };
 
+const Keys: React.FC<{}> = ({ children }) => (
+  <div className="keys">{children}</div>
+);
+
 export default SearchInput;

src/components/SettingsActions/SettingsActions.css

@@ -0,0 +1,21 @@
+button.action-button {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+button.action-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+button.action-button:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+@media screen and (max-width: 558px) {
+  .action-button {
+    display: none;
+  }
+}

src/components/SettingsActions/SettingsActions.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
+import { useRecoilValue, useResetRecoilState } from "recoil";
+import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
+import "./SettingsActions.css";
+import useTransientState from "../../hooks/useTransientState";
+import { resetSettingsSelector } from "../../state/selectors";
+
+const SettingsActions: React.FC = () => {
+  const weight = useRecoilValue(iconWeightAtom);
+  const size = useRecoilValue(iconSizeAtom);
+  const color = useRecoilValue(iconColorAtom);
+  const reset = useResetRecoilState(resetSettingsSelector);
+
+  const [copied, setCopied] = useTransientState<boolean>(false, 2000);
+
+  const copyDeepLinkToClipboard = () => {
+    const paramString = new URLSearchParams([
+      ["weight", weight.toString()],
+      ["size", size.toString()],
+      ["color", color.replace("#", "")],
+    ]).toString();
+    void navigator.clipboard
+      ?.writeText(`${window.location.host}?${paramString}`)
+      .then(() => {
+        setCopied(true);
+      })
+      .catch(() => {
+        alert("Clipboard permissions must be enabled to copy links!");
+      });
+  };
+
+  return (
+    <>
+      <button
+        className="action-button"
+        title="Restore default settings"
+        onClick={reset}
+      >
+        <ArrowCounterClockwise size={24} />
+      </button>
+      <button
+        className="action-button"
+        title="Copy URL for current settings"
+        onClick={copyDeepLinkToClipboard}
+      >
+        {copied ? (
+          <CheckCircle size={24} color="#1FA647" weight="fill" />
+        ) : (
+          <Link size={24} />
+        )}
+      </button>
+    </>
+  );
+};
+
+export default SettingsActions;

src/components/StyleInput/StyleInput.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React, { useMemo } from "react";
-import { useSetRecoilState } from "recoil";
+import { useRecoilState } from "recoil";
 import Select from "react-dropdown-select";
 import { PencilLine } from "phosphor-react";
 
@@ -45,7 +45,12 @@ const options: WeightOption[] = [
 type StyleInputProps = {};
 
 const StyleInput: React.FC<StyleInputProps> = () => {
-  const setStyle = useSetRecoilState(iconWeightAtom);
+  const [style, setStyle] = useRecoilState(iconWeightAtom);
+
+  const currentStyle = useMemo(
+    () => [options.find((option) => option.value === style)!!],
+    [style]
+  );
 
   const handleStyleChange = (values: WeightOption[]) =>
     setStyle(values[0].value as IconStyle);
@@ -53,7 +58,7 @@ const StyleInput: React.FC<StyleInputProps> = () => {
   return (
     <Select
       options={options}
-      values={[options[2]]}
+      values={currentStyle}
       searchable={false}
       labelField="key"
       onChange={handleStyleChange}

src/components/Toolbar/Toolbar.css

@@ -1,4 +1,5 @@
-menu.toolbar {
+nav.toolbar {
+  position: -webkit-sticky;
   position: sticky;
   top: -1px;
   padding: 0;

src/components/Toolbar/Toolbar.tsx

@@ -5,19 +5,21 @@ import StyleInput from "../StyleInput/StyleInput";
 import SearchInput from "../SearchInput/SearchInput";
 import SizeInput from "../SizeInput/SizeInput";
 import ColorInput from "../ColorInput/ColorInput";
+import SettingsActions from "../SettingsActions/SettingsActions";
 
 type ToolbarProps = {};
 
 const Toolbar: React.FC<ToolbarProps> = () => {
   return (
-    <menu className="toolbar" id="toolbar">
+    <nav className="toolbar" id="toolbar">
       <div className="toolbar-contents">
         <StyleInput />
         <SearchInput />
         <SizeInput />
         <ColorInput />
+        <SettingsActions />
       </div>
-    </menu>
+    </nav>
   );
 };
 

src/hooks/useDebounce.ts

@@ -0,0 +1,16 @@
+import { DependencyList, useEffect } from "react";
+import useTimeoutFn from "./useTimeoutFn";
+
+export type UseDebounceReturn = [() => boolean | null, () => void];
+
+export default function useDebounce(
+  fn: Function,
+  ms: number = 0,
+  deps: DependencyList = []
+): UseDebounceReturn {
+  const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
+
+  useEffect(reset, deps);
+
+  return [isReady, cancel];
+}

src/hooks/useGridSpans.ts

@@ -1,13 +1,18 @@
 import { useWindowSize } from "react-use";
 
+const MOBILE_BREAKPOINT = 536;
+
 const GRID_PADDING = 32; // .grid-container { padding }
 const TOOLBAR_WIDTH = 17; // IS THIS BROWSER-SPECIFIC?
 const MAX_GRID_WIDTH = 1120; // .grid { max-width }
 const ITEM_WIDTH = 168; // .grid-item { width; height; margin }
+const ITEM_WIDTH_MOBILE = 108; // .grid-item { width; height; margin }
 
 export default (): number => {
   const { width } = useWindowSize();
+  const itemWidth = width <= MOBILE_BREAKPOINT ? ITEM_WIDTH_MOBILE : ITEM_WIDTH;
+
   return Math.floor(
-    Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / ITEM_WIDTH
+    Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / itemWidth
   );
 };

src/hooks/useIconParameters.ts

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { useSearchParam } from "react-use";
+import { useSetRecoilState } from "recoil";
+import TinyColor from "tinycolor2";
+import { iconColorAtom, iconWeightAtom, iconSizeAtom } from "../state/atoms";
+import { IconStyle } from "../lib";
+
+export default () => {
+  const weight = useSearchParam("weight")?.replace(/["']/g, "");
+  const size = useSearchParam("size")?.replace(/["']/g, "");
+  const color = useSearchParam("color")?.replace(/["']/g, "");
+
+  const setColor = useSetRecoilState(iconColorAtom);
+  const setWeight = useSetRecoilState(iconWeightAtom);
+  const setSize = useSetRecoilState(iconSizeAtom);
+
+  useEffect(() => {
+    if (weight) {
+      if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle);
+    }
+  }, [weight, setWeight]);
+
+  useEffect(() => {
+    if (size) {
+      const normalizedSize = parseInt(size);
+      if (typeof normalizedSize === "number" && isFinite(normalizedSize))
+        setSize(Math.min(Math.max(normalizedSize, 16), 96));
+    }
+  }, [size, setSize]);
+
+  useEffect(() => {
+    if (color) {
+      const normalizedColor = TinyColor(color);
+      if (normalizedColor.isValid()) setColor(normalizedColor.toHexString());
+    }
+  }, [color, setColor]);
+
+  useEffect(() => {
+    if (!weight && !size && !color) {
+      const persistedState = JSON.parse(
+        window.localStorage.getItem("__phosphor_settings__") || "null"
+      );
+
+      if (!!persistedState) {
+        const { weight, size, color } = persistedState;
+        if (weight) {
+          if (weight.toUpperCase() in IconStyle) setWeight(weight as IconStyle);
+        }
+        if (size) {
+          const normalizedSize = parseInt(size);
+          if (typeof normalizedSize === "number" && isFinite(normalizedSize))
+            setSize(Math.min(Math.max(normalizedSize, 16), 96));
+        }
+        if (color) {
+          const normalizedColor = TinyColor(color);
+          if (normalizedColor.isValid())
+            setColor(normalizedColor.toHexString());
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

src/hooks/usePersistSettings.ts

@@ -0,0 +1,18 @@
+import { useRecoilValue } from "recoil";
+import useDebounce from "./useDebounce";
+import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../state/atoms";
+
+export default function usePersistSettings() {
+  const weight = useRecoilValue(iconWeightAtom);
+  const size = useRecoilValue(iconSizeAtom);
+  const color = useRecoilValue(iconColorAtom);
+
+  useDebounce(
+    () => {
+      const serializedState = JSON.stringify({ weight, size, color });
+      window.localStorage.setItem("__phosphor_settings__", serializedState);
+    },
+    2000,
+    [weight, size, color]
+  );
+}

src/hooks/useThrottle.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from "react";
+import useUnmount from "./useUnmount";
+
+const useThrottle = <T>(value: T, ms: number = 200) => {
+  const [state, setState] = useState<T>(value);
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const nextValue = useRef(null) as any;
+  const hasNextValue = useRef(0) as any;
+
+  useEffect(() => {
+    if (!timeout.current) {
+      setState(value);
+      const timeoutCallback = () => {
+        if (hasNextValue.current) {
+          hasNextValue.current = false;
+          setState(nextValue.current);
+          timeout.current = setTimeout(timeoutCallback, ms);
+        } else {
+          timeout.current = undefined;
+        }
+      };
+      timeout.current = setTimeout(timeoutCallback, ms);
+    } else {
+      nextValue.current = value;
+      hasNextValue.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  useUnmount(() => {
+    timeout.current && clearTimeout(timeout.current);
+  });
+
+  return state;
+};
+
+export default useThrottle;

src/hooks/useTimeoutFn.ts

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+
+export default function useTimeoutFn(
+  fn: Function,
+  ms: number = 0
+): UseTimeoutFnReturn {
+  const ready = useRef<boolean | null>(false);
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const callback = useRef(fn);
+
+  const isReady = useCallback(() => ready.current, []);
+
+  const set = useCallback(() => {
+    ready.current = false;
+    timeout.current && clearTimeout(timeout.current);
+
+    timeout.current = setTimeout(() => {
+      ready.current = true;
+      callback.current();
+    }, ms);
+  }, [ms]);
+
+  const clear = useCallback(() => {
+    ready.current = null;
+    timeout.current && clearTimeout(timeout.current);
+  }, []);
+
+  // update ref when function changes
+  useEffect(() => {
+    callback.current = fn;
+  }, [fn]);
+
+  // set on mount, clear on unmount
+  useEffect(() => {
+    set();
+
+    return clear;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ms]);
+
+  return [isReady, clear, set];
+}

src/hooks/useUnmount.ts

@@ -0,0 +1,12 @@
+import { useRef, useEffect } from "react";
+
+const useUnmount = (fn: () => any): void => {
+  const fnRef = useRef(fn);
+
+  // update the ref each render so if it change the newest callback will be invoked
+  fnRef.current = fn;
+
+  useEffect(() => () => fnRef.current(), []);
+};
+
+export default useUnmount;

src/lib/index.ts

@@ -15,7 +15,7 @@ export enum IconCategory {
   COMMERCE = "commerce",
   COMMUNICATION = "communications",
   DESIGN = "design",
-  DEVELOPMENT = "development",
+  DEVELOPMENT = "technology & development",
   OFFICE = "office",
   EDITOR = "editor",
   FINANCE = "finances",

src/state/atoms.ts

@@ -13,7 +13,7 @@ export const iconWeightAtom = atom<IconStyle>({
 
 export const iconSizeAtom = atom<number>({
   key: "iconSizeAtom",
-  default: 48,
+  default: 32,
 });
 
 export const iconColorAtom = atom<string>({

src/state/selectors.ts

@@ -2,7 +2,12 @@ import { selector, selectorFamily } from "recoil";
 import TinyColor from "tinycolor2";
 import Fuse from "fuse.js";
 
-import { searchQueryAtom, iconColorAtom } from "./atoms";
+import {
+  searchQueryAtom,
+  iconWeightAtom,
+  iconSizeAtom,
+  iconColorAtom,
+} from "./atoms";
 import { IconEntry, IconCategory } from "../lib";
 import { icons } from "../lib/icons";
 
@@ -52,7 +57,9 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
   IconCategory
 >({
   key: "singleCategoryQueryResultsSelector",
-  get: (category: IconCategory) => ({ get }) => {
+  get:
+    (category: IconCategory) =>
+    ({ get }) => {
       const filteredResults = get(filteredQueryResultsSelector);
       return new Promise((resolve) =>
         resolve(
@@ -66,3 +73,13 @@ export const isDarkThemeSelector = selector<boolean>({
   key: "isDarkThemeSelector",
   get: ({ get }) => TinyColor(get(iconColorAtom)).isLight(),
 });
+
+export const resetSettingsSelector = selector<null>({
+  key: "resetSettings",
+  get: () => null,
+  set: ({ reset }) => {
+    reset(iconWeightAtom);
+    reset(iconSizeAtom);
+    reset(iconColorAtom);
+  },
+});