diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md
index 3f5c1b82e..166a4b04e 100644
--- a/docs/docs/components/icon.md
+++ b/docs/docs/components/icon.md
@@ -17,11 +17,14 @@ Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https:
 
 The default icon library is Font Awesome Free, which comes with two icon families: `classic` and `brands`. Use the `family` attribute to set the icon family.
 
-Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp` and `duotone`. For these icon families, use the `variant` attribute to set the variant.
+Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp`, `duotone`, and `sharp-duotone`. For these icon families, use the `variant` attribute to set the variant.
 
 ```html {.example}
-<wa-icon family="brands" name="font-awesome"></wa-icon>
-<wa-icon family="brands" name="web-awesome"></wa-icon>
+  <wa-icon family="brands" name="font-awesome"></wa-icon>
+  <wa-icon family="brands" name="web-awesome"></wa-icon>
+  <wa-icon family="classic" variant="light" name="sparkles"></wa-icon>
+  <wa-icon family="sharp" variant="solid" name="fire"></wa-icon>
+  <wa-icon family="duotone" variant="regular" name="cake-slice"></wa-icon>
 ```
 
 ### Setting defaults via CSS
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index d6b830510..700ca9040 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -18,6 +18,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed a bug that caused `<wa-radio-group>` to have an undesired margin below it
 - Fixed a bug in `<wa-select>` that caused incorrect spacing of icons
 - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control
+- Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `<wa-icon>`
 
 ## 3.0.0-alpha.12
 
diff --git a/src/components/icon/library.default.ts b/src/components/icon/library.default.ts
index 23d6847d7..68f5f1424 100644
--- a/src/components/icon/library.default.ts
+++ b/src/components/icon/library.default.ts
@@ -22,20 +22,31 @@ function getIconUrl(name: string, family: string, variant: string) {
     if (variant === 'solid') folder = 'sharp-solid';
   }
 
+  // Duotone
+  if (family === 'duotone') {
+    if (variant === 'thin') folder = 'duotone-thin';
+    if (variant === 'light') folder = 'duotone-light';
+    if (variant === 'regular') folder = 'duotone-regular';
+    if (variant === 'solid') folder = 'duotone';
+  }
+
+  // Sharp Duotone
+  if (family === 'sharp-duotone') {
+    if (variant === 'thin') folder = 'sharp-duotone-thin';
+    if (variant === 'light') folder = 'sharp-duotone-light';
+    if (variant === 'regular') folder = 'sharp-duotone-regular';
+    if (variant === 'solid') folder = 'sharp-duotone-solid';
+  }
+
   // Brands
   if (family === 'brands') {
     folder = 'brands';
   }
 
-  // Duotone
-  if (family === 'duotone') {
-    folder = 'duotone';
-  }
-
   // Use the default CDN
   return isPro
-    ? `https://ka-p.fontawesome.com/releases/v6.5.2/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
-    : `https://ka-f.fontawesome.com/releases/v6.5.2/svgs/${folder}/${name}.svg`;
+    ? `https://ka-p.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
+    : `https://ka-f.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg`;
 }
 
 const library: IconLibrary = {