diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index fe2c6517..61ec9cf5 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -63,6 +63,34 @@
   </AccordionItem>
 </Accordion>
 
+### Large size
+
+<Accordion size="lg">
+  <AccordionItem title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
+### Small size
+
+<Accordion size="sm">
+  <AccordionItem title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
 ### Skeleton
 
 <Accordion skeleton count={3} />
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 2159e051..6e90292d 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -5,6 +5,12 @@
    */
   export let align = "end";
 
+  /**
+   * Specify the size of the accordion
+   * @type {"sm" | "lg"} [size]
+   */
+  export let size = undefined;
+
   /**
    * Set to `true` to display the skeleton state
    * @type {boolean} [skeleton=false]
@@ -26,7 +32,9 @@
   <ul
     class:bx--accordion="{true}"
     {...$$restProps}
-    class="bx--accordion--{align} {$$restProps.class}"
+    class="bx--accordion--{align}
+      {size && `bx--accordion--${size}`}
+      {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter