diff --git a/docs/components/input.md b/docs/components/input.md
index 4de41792..115e9624 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -84,18 +84,18 @@ Use the `prefix` and `suffix` slots to add icons.
 
 ```html preview
 <sl-input placeholder="Small" size="small">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="gear" slot="suffix"></sl-icon>
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
 </sl-input>
 <br>
 <sl-input placeholder="Medium" size="medium">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="gear" slot="suffix"></sl-icon>
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
 </sl-input>
 <br>
 <sl-input placeholder="Large" size="large">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="gear" slot="suffix"></sl-icon>
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
 </sl-input>
 ```
 
diff --git a/docs/components/select.md b/docs/components/select.md
index 63376290..eb14d400 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -188,46 +188,34 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
 </sl-select>
 ```
 
-### Prefix and Suffix
+### Prefix & Suffix Icons
 
-Use the `prefix` or `suffix` slot to add a prefix or suffix to the selected value
+Use the `prefix` and `suffix` slots to add icons.
 
 ```html preview
-<sl-select label="Sort by" class="sort">
-  <sl-menu-item value="name.asc">Name (Asc)</sl-menu-item>
-  <sl-menu-item value="name.desc">Name (Desc)</sl-menu-item>
-  <sl-menu-item value="value.asc">Value (Asc)</sl-menu-item>
-  <sl-menu-item value="value.desc">Value (Desc)</sl-menu-item>
-  <sl-icon name="sort-down" slot="suffix"></sl-icon>
+<sl-select placeholder="Small" size="small">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-menu-item value="option-1">Option 1</sl-menu-item>
+  <sl-menu-item value="option-2">Option 2</sl-menu-item>
+  <sl-menu-item value="option-3">Option 3</sl-menu-item>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
 </sl-select>
-
 <br>
-
-<sl-select label="Transaction Price" class="price">
-  <sl-icon name="currency-bitcoin" slot="prefix"></sl-icon>
-  <sl-menu-item value="option-1">0.02</sl-menu-item>
-  <sl-menu-item value="option-2">0.04</sl-menu-item>
-  <sl-menu-item value="option-3">0.06</sl-menu-item>
+<sl-select placeholder="Medium" size="medium">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-menu-item value="option-1">Option 1</sl-menu-item>
+  <sl-menu-item value="option-2">Option 2</sl-menu-item>
+  <sl-menu-item value="option-3">Option 3</sl-menu-item>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
+</sl-select>
+<br>
+<sl-select placeholder="Large" size="large">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-menu-item value="option-1">Option 1</sl-menu-item>
+  <sl-menu-item value="option-2">Option 2</sl-menu-item>
+  <sl-menu-item value="option-3">Option 3</sl-menu-item>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
 </sl-select>
-
-<style>
-  sl-select.sort sl-icon {
-    font-size: 24px;
-  } 
-
-  sl-select.price sl-icon {
-    font-size: 24px;
-  }   
-</style>
-
-<script>
-  const select = document.querySelector('sl-select.sort');
-  select.addEventListener('sl-change', event => {
-    const icon = select.value.startsWith('name') ? 'sort-alpha-down' : 'sort-numeric-down';
-    const variation = select.value.endsWith('asc') ? '' : '-alt';
-    select.querySelector('sl-icon').name = `${icon}${variation}`;
-  })
-</script>
 ```
 
 [component-metadata:sl-select]
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index a404f5e0..bdfe90f2 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -39,6 +39,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
 - Added `--sl-color-*-950` swatches to all color palettes
 - Added a console error that appears when menu items have duplicate values in `sl-select`
 - Added CodePen link to code examples
+- Added `prefix` and `suffix` slots to `sl-select` [#501](https://github.com/shoelace-style/shoelace/pull/501)
 - Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438)
 - Fixed a bug in `sl-menu` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
 - Fixed a bug in `sl-radio-group` where clicking a radio button would cause the wrong control to be focused
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 70de2492..a639814a 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -32,7 +32,8 @@ let id = 0;
  * @dependency sl-tag
  *
  * @slot - The select's options in the form of menu items.
- * @slot prefix -  The select's prefix.
+ * @slot prefix - Used to prepend an icon or similar element to the select.
+ * @slot suffix - Used to append an icon or similar element to the select.
  * @slot label - The select's label. Alternatively, you can use the label prop.
  * @slot suffix - The select's suffix.
  * @slot help-text - Help text that describes how to use the select.