diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml
index d872beb17..cc8634b6a 100644
--- a/.github/workflows/prepare-release.yml
+++ b/.github/workflows/prepare-release.yml
@@ -15,7 +15,7 @@ permissions:
 jobs:
   build:
     permissions:
-      contents: write  # for softprops/action-gh-release to create GitHub release
+      contents: write # for softprops/action-gh-release to create GitHub release
 
     runs-on: ubuntu-latest
 
diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml
index f707f509b..1cd7f668a 100644
--- a/.github/workflows/release-insiders.yml
+++ b/.github/workflows/release-insiders.yml
@@ -44,13 +44,13 @@ jobs:
         run: |
           echo "SHA_SHORT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
 
-      - name: "Version `heroicons` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}"
+      - name: 'Version `heroicons` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
         run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version
 
-      - name: "Version `@heroicons/react` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}"
+      - name: 'Version `@heroicons/react` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
         run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version --prefix react
 
-      - name: "Version `@heroicons/vue` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}"
+      - name: 'Version `@heroicons/vue` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
         run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version --prefix vue
 
       - name: Publish `heroicons`
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 10f61ee0b..3dc997e56 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -45,16 +45,16 @@ jobs:
           echo "RELEASE_CHANNEL=$(npm run release-channel --silent)" >> $GITHUB_ENV
 
       - name: Publish `heroicons`
-        run: npm publish --tag ${{ env.RELEASE_CHANNEL }}  
+        run: npm publish --tag ${{ env.RELEASE_CHANNEL }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish `@heroicons/react`
-        run: npm publish ./react --tag ${{ env.RELEASE_CHANNEL }}  
+        run: npm publish ./react --tag ${{ env.RELEASE_CHANNEL }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish `@heroicons/vue`
-        run: npm publish ./vue --tag ${{ env.RELEASE_CHANNEL }}  
+        run: npm publish ./vue --tag ${{ env.RELEASE_CHANNEL }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/README.md b/README.md
index 149ed3c97..be7eec066 100644
--- a/README.md
+++ b/README.md
@@ -15,19 +15,23 @@
   <a href="https://heroicons.com"><strong>Browse at Heroicons.com &rarr;</strong></a>
 </p>
 
-
 <p align="center">
     <a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/heroicons" alt="Latest Release"></a>
     <a href="https://github.com/tailwindlabs/heroicons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/heroicons.svg" alt="License"></a>
 </p>
 
-
 ## Basic Usage
 
 The quickest way to use these icons is to simply copy the source for the icon you need from [heroicons.com](https://heroicons.com) and inline it directly into your HTML:
 
 ```html
-<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+<svg
+  class="h-6 w-6 text-gray-500"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  stroke-width="2"
+>
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -54,7 +58,7 @@ import { BeakerIcon } from '@heroicons/react/24/solid'
 function MyComponent() {
   return (
     <div>
-      <BeakerIcon className="h-6 w-6 text-blue-500"/>
+      <BeakerIcon className="h-6 w-6 text-blue-500" />
       <p>...</p>
     </div>
   )
@@ -67,10 +71,9 @@ Icons use an upper camel case naming convention and are always suffixed with the
 
 [Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@heroicons/react/24/outline/)
 
-
 ## Vue
 
-*Note that this library currently only supports Vue 3.*
+_Note that this library currently only supports Vue 3._
 
 First, install `@heroicons/vue` from npm:
 
@@ -83,7 +86,7 @@ Now each icon can be imported individually as a Vue component:
 ```vue
 <template>
   <div>
-    <BeakerIcon class="h-6 w-6 text-blue-500"/>
+    <BeakerIcon class="h-6 w-6 text-blue-500" />
     <p>...</p>
   </div>
 </template>
diff --git a/package-lock.json b/package-lock.json
index ea227b326..f4a1aef48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@svgr/core": "^5.5.0",
         "@vue/compiler-dom": "^3.0.5",
         "camelcase": "^6.0.0",
+        "prettier": "^2.8.7",
         "rimraf": "^3.0.2",
         "svgo": "^1.3.2"
       }
@@ -1761,6 +1762,21 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -3307,6 +3323,12 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "dev": true
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
diff --git a/package.json b/package.json
index e61bb0cff..892f43a6f 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@svgr/core": "^5.5.0",
     "@vue/compiler-dom": "^3.0.5",
     "camelcase": "^6.0.0",
+    "prettier": "^2.8.7",
     "rimraf": "^3.0.2",
     "svgo": "^1.3.2"
   }
diff --git a/prettier.config.js b/prettier.config.js
index a92e1df6f..1b95cd0de 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -2,4 +2,4 @@ module.exports = {
   singleQuote: true,
   semi: false,
   printWidth: 100,
-};
+}
diff --git a/scripts/build.js b/scripts/build.js
index be2df08dd..f3d791497 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -121,43 +121,43 @@ async function buildExports(styles) {
   }
 
   // For those that want to read the version from package.json
-  pkg[`./package.json`] = { "default": "./package.json" }
+  pkg[`./package.json`] = { default: './package.json' }
 
   // Backwards compatibility with v1 imports (points to proxy that prints an error message):
-  pkg["./outline"] = { "default": "./outline/index.js" }
-  pkg["./outline/index"] = { "default": "./outline/index.js" }
-  pkg["./outline/index.js"] = { "default": "./outline/index.js" }
-  pkg["./solid"] = { "default": "./solid/index.js" }
-  pkg["./solid/index"] = { "default": "./solid/index.js" }
-  pkg["./solid/index.js"] = { "default": "./solid/index.js" }
+  pkg['./outline'] = { default: './outline/index.js' }
+  pkg['./outline/index'] = { default: './outline/index.js' }
+  pkg['./outline/index.js'] = { default: './outline/index.js' }
+  pkg['./solid'] = { default: './solid/index.js' }
+  pkg['./solid/index'] = { default: './solid/index.js' }
+  pkg['./solid/index.js'] = { default: './solid/index.js' }
 
   // Explicit exports for each style:
   for (let style of styles) {
     pkg[`./${style}`] = {
-      "types": `./${style}/index.d.ts`,
-      "import": `./${style}/index.js`,
-      "require": `./${style}/index.js`
+      types: `./${style}/index.d.ts`,
+      import: `./${style}/index.js`,
+      require: `./${style}/index.js`,
     }
     pkg[`./${style}/*`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`,
-      "require": `./${style}/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
+      require: `./${style}/*.js`,
     }
     pkg[`./${style}/*.js`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`,
-      "require": `./${style}/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
+      require: `./${style}/*.js`,
     }
 
     // This dir is basically an implementation detail, but it's needed for
     // backwards compatibility in case people were importing from it directly.
     pkg[`./${style}/esm/*`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
     }
     pkg[`./${style}/esm/*.js`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
     }
   }
 
@@ -193,11 +193,7 @@ async function main(package) {
 
   let packageJson = JSON.parse(await fs.readFile(`./${package}/package.json`, 'utf8'))
 
-  packageJson.exports = await buildExports([
-    '20/solid',
-    '24/outline',
-    '24/solid',
-  ])
+  packageJson.exports = await buildExports(['20/solid', '24/outline', '24/solid'])
 
   await ensureWriteJson(`./${package}/package.json`, packageJson)