diff --git a/docs/components/icon.md b/docs/components/icon.md
index 791b99fc2..f29a800ee 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -76,7 +76,7 @@ Here's an example that registers an icon library located in the `/assets/icons`
 
 ```html
 <script type="module">
-  import { registerIconLibrary } from '/shoelace/dist/utilities/icon-library.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('my-icons', {
     resolver: name => `/assets/icons/${name}.svg`,
@@ -104,7 +104,7 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('boxicons', {
     resolver: name => {
@@ -158,7 +158,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/fe
 </div>
 
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('feather', {
     resolver: name => `https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/icons/${name}.svg`
@@ -174,7 +174,7 @@ Icons in this library are licensed under the [Font Awesome Free License](https:/
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('fa', {
     resolver: name => {
@@ -220,7 +220,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('heroicons', {
     resolver: name => `https://cdn.jsdelivr.net/npm/heroicons@0.4.2/outline/${name}.svg`
@@ -245,7 +245,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('iconoir', {
     resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`
@@ -270,7 +270,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/io
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('ionicons', {
     resolver: name => `https://cdn.jsdelivr.net/npm/ionicons@5.1.2/dist/ionicons/svg/${name}.svg`,
@@ -315,7 +315,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/mi
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('jam', {
     resolver: name => `https://cdn.jsdelivr.net/npm/jam-icons@2.0.0/svg/${name}.svg`,
@@ -348,7 +348,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('material', {
     resolver: name => {
@@ -391,7 +391,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('remixicon', {
     resolver: name => {
@@ -428,7 +428,7 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
 
 ```html preview
 <script type="module">
-  import { registerIconLibrary } from '/dist/shoelace.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('unicons', {
     resolver: name => {
@@ -464,7 +464,7 @@ This example will load the same set of icons from the jsDelivr CDN instead of yo
 
 ```html
 <script type="module">
-  import { registerIconLibrary } from '/shoelace/dist/utilities/icon-library.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('default', {
     resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`
@@ -480,7 +480,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
 
 ```html
 <script type="module">
-  import { registerIconLibrary } from '/shoelace/dist/utilities/icon-library.js';
+  import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
 
   registerIconLibrary('system', {
     resolver: name => `/path/to/custom/icons/${name}.svg`
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index d5cf74ac3..0bbd352c9 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -30,6 +30,8 @@ Once you've done that, add the following tags to your page. Make sure to update
 <script type="module" src="/scripts/shoelace/dist/shoelace.js"></script>
 ```
 
+?> For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in.
+
 ## Setting the Base Path
 
 Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users.
@@ -56,15 +58,15 @@ The previous approach is the _easiest_ way to load Shoelace, but easy isn't alwa
 
 Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load and register each component manually, including its dependencies.
 
-Here's an example that loads only the button component and its dependencies. Again, we're assuming you're serving Shoelace's `dist` directory from `/scripts/shoelace`.
+Here's an example that loads only the button component and its dependencies. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
 
 ```html
 <!-- The base stylesheet is always required -->
-<link rel="stylesheet" href="/scripts/shoelace/dist/themes/base.css">
+<link rel="stylesheet" href="@shoelace-style/shoelace/dist/themes/base.css">
 
 <script type="module" data-shoelace="/scripts/shoelace">
-  import SlButton from '/scripts/shoelace/dist/components/button/button.js';
-  import SlSpinner from '/scripts/shoelace/dist/components/spinner/spinner.js';
+  import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
+  import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
   
   // <sl-button> and <sl-spinner> are ready to use!
 </script>