diff --git a/src/docs/components/docs-pick-theme/docs-pick-theme.css b/src/docs/components/docs-pick-theme/docs-pick-theme.css
index f75ff6174c..89b7900001 100644
--- a/src/docs/components/docs-pick-theme/docs-pick-theme.css
+++ b/src/docs/components/docs-pick-theme/docs-pick-theme.css
@@ -16,7 +16,7 @@
     padding: var(--ld-sp-8);
   }
 
-  .ld-select__btn-trigger-text {
+  .ld-select__btn-trigger-text-wrapper {
     display: none;
   }
 }
diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css
index 759e7783e2..efe04bcbdb 100644
--- a/src/liquid/components/ld-button/ld-button.css
+++ b/src/liquid/components/ld-button/ld-button.css
@@ -13,18 +13,18 @@ ld-button {
   --ld-button-icon-margin-x-sm: -0.125rem;
   --ld-button-icon-margin-x-md: -0.25rem;
   --ld-button-icon-margin-x-lg: -0.5rem;
-  --ld-button-padding-sm-x: 0.625rem;
-  --ld-button-padding-sm-y: 0.5rem;
-  --ld-button-padding-md-x: 0.875rem;
-  --ld-button-padding-md-y: 0.625rem;
-  --ld-button-padding-lg-x: 1.3125rem;
-  --ld-button-padding-lg-y: 0.75rem;
+  --ld-button-padding-x-sm: 0.625rem;
+  --ld-button-padding-y-sm: 0.5rem;
+  --ld-button-padding-x-md: 0.875rem;
+  --ld-button-padding-y-md: 0.625rem;
+  --ld-button-padding-x-lg: 1.3125rem;
+  --ld-button-padding-y-lg: 0.75rem;
   --ld-button-gap-sm: 0.625rem;
   --ld-button-gap-md: 0.875rem;
   --ld-button-gap-lg: 1.1875rem;
   font: var(--ld-typo-body-m);
   border: 0;
-  padding: var(--ld-button-padding-md-y) var(--ld-button-padding-md-x);
+  padding: var(--ld-button-padding-y-md) var(--ld-button-padding-x-md);
   border-radius: var(--ld-br-m);
   min-height: 2.5rem;
   min-width: 2.5rem;
@@ -70,7 +70,7 @@ ld-button {
   &:where(.ld-button--sm) {
     min-height: 2rem;
     min-width: 2rem;
-    padding: var(--ld-button-padding-sm-y) var(--ld-button-padding-sm-x);
+    padding: var(--ld-button-padding-y-sm) var(--ld-button-padding-x-sm);
     font: var(--ld-typo-body-s);
     font-weight: 700;
     line-height: 1;
@@ -92,7 +92,7 @@ ld-button {
   &:where(.ld-button--lg) {
     min-height: 3.125rem;
     min-width: 3.125rem;
-    padding: var(--ld-button-padding-lg-y) var(--ld-button-padding-lg-x);
+    padding: var(--ld-button-padding-y-lg) var(--ld-button-padding-x-lg);
     font: var(--ld-typo-body-l);
     font-weight: 700;
     line-height: 1;
diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
index 0709ccb6aa..08324a5f7e 100644
--- a/src/liquid/components/ld-select/ld-select.css
+++ b/src/liquid/components/ld-select/ld-select.css
@@ -1,13 +1,22 @@
 .ld-select,
 .ld-select__popper {
+  --ld-select-icon-size-sm: 1rem;
+  --ld-select-icon-size-md: 1.25rem;
+  --ld-select-icon-size-lg: 1.5rem;
   --ld-select-popper-max-height: calc(100vh - 1.25rem);
   --ld-select-min-width: 12.8125rem;
   --ld-select-min-height-sm: 2rem;
   --ld-select-min-height-md: 2.5rem;
   --ld-select-min-height-lg: 3.125rem;
+  --ld-select-padding-x-sm: 0.625rem;
+  --ld-select-padding-x-md: 0.75rem;
+  --ld-select-padding-x-lg: 0.875rem;
   --ld-select-padding-y-sm: 0.25rem;
   --ld-select-padding-y-md: 0.5rem;
   --ld-select-padding-y-lg: 0.5rem;
+  --ld-select-padding-right-sm: calc(2.5rem + 0.625rem);
+  --ld-select-padding-right-md: calc(2.5rem + 0.75rem);
+  --ld-select-padding-right-lg: calc(2.5rem + 0.875rem);
 }
 
 :where(.ld-select) {
@@ -15,12 +24,35 @@
   position: relative;
 
   &:where(:not(ld-select)) {
+    .ld-icon,
     .ld-select__icon {
       position: absolute;
-      right: var(--ld-sp-12);
+      right: var(--ld-select-padding-x-md);
       top: 50%;
       transform: translateY(-50%);
     }
+    :where(select:not[multiple]) {
+      padding-right: var(--ld-select-padding-right-md);
+    }
+
+    &:where(.ld-select--sm) {
+      .ld-icon,
+      .ld-select__icon {
+        right: var(--ld-select-padding-x-sm);
+      }
+      :where(select:not[multiple]) {
+        padding-right: var(--ld-select-padding-right-sm);
+      }
+    }
+    &:where(.ld-select--lg) {
+      .ld-icon,
+      .ld-select__icon {
+        right: var(--ld-select-padding-x-lg);
+      }
+      :where(select:not[multiple]) {
+        padding-right: var(--ld-select-padding-right-lg);
+      }
+    }
   }
 }
 
@@ -42,7 +74,7 @@
   font: var(--ld-typo-body-m);
   border: 0;
   outline: none;
-  padding: var(--ld-select-padding-y-md) var(--ld-sp-12);
+  padding: var(--ld-select-padding-y-md) var(--ld-select-padding-x-md);
   border-radius: var(--ld-br-m);
   height: 100%;
   user-select: none;
@@ -57,10 +89,6 @@
   &:where(select) {
     width: 100%;
 
-    &:not([multiple]) {
-      padding-right: var(--ld-sp-40);
-    }
-
     &[multiple] {
       optgroup {
         padding: var(--ld-sp-8) 0;
@@ -94,8 +122,10 @@
 
   &:disabled,
   &:disabled + .ld-select__icon,
+  &:disabled + .ld-icon,
   &:where([aria-disabled='true']),
-  &:where([aria-disabled='true']) + .ld-select__icon {
+  &:where([aria-disabled='true']) + .ld-select__icon,
+  &:where([aria-disabled='true']) + .ld-icon {
     color: var(--ld-col-rblck1);
   }
 }
@@ -117,12 +147,12 @@
 
 .ld-select--sm > select,
 .ld-select--sm .ld-select__btn-trigger {
-  padding: var(--ld-select-padding-y-sm) var(--ld-sp-12);
+  padding: var(--ld-select-padding-y-sm) var(--ld-select-padding-x-sm);
 }
 
 .ld-select--lg > select,
 .ld-select--lg .ld-select__btn-trigger {
-  padding: var(--ld-select-padding-y-lg) var(--ld-sp-12);
+  padding: var(--ld-select-padding-y-lg) var(--ld-select-padding-x-lg);
 }
 
 .ld-select--ghost {
@@ -182,6 +212,7 @@
       box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-default);
     }
 
+    + .ld-icon,
     + .ld-select__icon,
     .ld-select__icon {
       color: var(--ld-col-rr-default);
@@ -191,6 +222,7 @@
       &:hover {
         box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-default);
 
+        + .ld-icon,
         + .ld-select__icon,
         .ld-select__icon,
         [slot='icon'] {
@@ -199,6 +231,7 @@
       }
     }
     &:where(:focus:focus-visible) {
+      + .ld-icon,
       + .ld-select__icon,
       .ld-select__icon,
       [slot='icon'] {
@@ -207,6 +240,7 @@
     }
     &:where(:active),
     &:where(:active:focus-visible) {
+      + .ld-icon,
       + .ld-select__icon,
       .ld-select__icon,
       [slot='icon'] {
@@ -364,16 +398,39 @@
 
 .ld-select__icon {
   fill: none;
+  width: var(--ld-sp-16);
+  height: var(--ld-sp-16);
 
   .ld-select [slot='icon'] + & {
     display: none;
   }
 }
 
+.ld-select {
+  select + .ld-icon,
+  [slot='icon'] {
+    width: var(--ld-select-icon-size-md);
+    height: var(--ld-select-icon-size-md);
+  }
+}
+.ld-select--sm {
+  select + .ld-icon,
+  [slot='icon'] {
+    width: var(--ld-select-icon-size-sm);
+    height: var(--ld-select-icon-size-sm);
+  }
+}
+.ld-select--lg {
+  select + .ld-icon,
+  [slot='icon'] {
+    width: var(--ld-select-icon-size-lg);
+    height: var(--ld-select-icon-size-lg);
+  }
+}
+
+.ld-select select + .ld-icon,
 .ld-select__icon,
 .ld-select [slot='icon'] {
-  width: var(--ld-sp-16);
-  height: var(--ld-sp-16);
   flex-shrink: 0;
   display: grid;
   place-content: center;
@@ -384,6 +441,12 @@
   :where(.ld-select__btn-trigger[aria-disabled='true']) & {
     color: var(--ld-col-rblck1);
   }
+
+  .ld-icon,
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .ld-select__icon--rotated {
@@ -466,6 +529,7 @@
     :where(select:not(:disabled)),
     :where(.ld-select__btn-trigger) {
       .ld-select__icon,
+      + .ld-icon,
       + .ld-select__icon,
       [slot='icon'] {
         color: var(--ld-thm-ocean-bg-primary);
@@ -474,6 +538,7 @@
       @media (hover: hover) {
         &:where(:hover) {
           .ld-select__icon,
+          + .ld-icon,
           + .ld-select__icon,
           [slot='icon'] {
             color: var(--ld-col-rb-hover);
@@ -492,6 +557,7 @@
       &:where(:active),
       &:where(:active:focus-visible) {
         .ld-select__icon,
+        + .ld-icon,
         + .ld-select__icon,
         [slot='icon'] {
           color: var(--ld-col-rb-active);
@@ -578,6 +644,7 @@
     :where(select:not(:disabled)),
     :where(.ld-select__btn-trigger) {
       .ld-select__icon,
+      + .ld-icon,
       + .ld-select__icon,
       [slot='icon'] {
         color: var(--ld-col-rp-default);
@@ -586,6 +653,7 @@
       @media (hover: hover) {
         &:where(:hover) {
           .ld-select__icon,
+          + .ld-icon,
           + .ld-select__icon,
           [slot='icon'] {
             color: var(--ld-col-rp-hover);
@@ -596,6 +664,7 @@
         box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
 
         .ld-select__icon,
+        + .ld-icon,
         + .ld-select__icon,
         [slot='icon'] {
           color: var(--ld-col-rp-focus);
@@ -604,9 +673,10 @@
       &:where(:active),
       &:where(:active:focus-visible) {
         .ld-select__icon,
+        + .ld-icon,
         + .ld-select__icon,
         [slot='icon'] {
-          color: var(--ld-col-rb-active);
+          color: var(--ld-col-rp-active);
         }
       }
     }
@@ -686,6 +756,7 @@
     :where(select:not(:disabled)),
     :where(.ld-select__btn-trigger) {
       .ld-select__icon,
+      + .ld-icon,
       + .ld-select__icon,
       [slot='icon'] {
         color: var(--ld-thm-tea-bg-primary);
@@ -694,6 +765,7 @@
       @media (hover: hover) {
         &:where(:hover) {
           .ld-select__icon,
+          + .ld-icon,
           + .ld-select__icon,
           [slot='icon'] {
             color: var(--ld-col-rg-hover);
@@ -704,6 +776,7 @@
         box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
 
         .ld-select__icon,
+        + .ld-icon,
         + .ld-select__icon,
         [slot='icon'] {
           color: var(--ld-col-rg-focus);
@@ -712,6 +785,7 @@
       &:where(:active),
       &:where(:active:focus-visible) {
         .ld-select__icon,
+        + .ld-icon,
         + .ld-select__icon,
         [slot='icon'] {
           color: var(--ld-col-rg-active);
@@ -763,12 +837,20 @@
     :where(.ld-select__shadow) {
       height: calc(100% + var(--ld-select-min-height-sm));
     }
+
+    .ld-option-internal {
+      padding-left: var(--ld-select-padding-x-sm);
+    }
   }
 
   &:where(.ld-select__popper--lg) {
     :where(.ld-select__shadow) {
       height: calc(100% + var(--ld-select-min-height-lg));
     }
+
+    .ld-option-internal {
+      padding-left: var(--ld-select-padding-x-lg);
+    }
   }
 
   &:where(.ld-tether-pinned) {
diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
index aba2467bfb..cb80502551 100644
--- a/src/liquid/components/ld-select/ld-select.tsx
+++ b/src/liquid/components/ld-select/ld-select.tsx
@@ -863,7 +863,7 @@ export class LdSelect {
     if (this.invalid) popperCl += ' ld-select__popper--invalid'
     if (detached) popperCl += ' ld-select__popper--detached'
     if (this.expanded) popperCl += ' ld-select__popper--expanded'
-    if (this.size) cl += ` ld-select__popper--${this.size}`
+    if (this.size) popperCl += ` ld-select__popper--${this.size}`
     if (this.themeCl) popperCl += ` ${this.themeCl}`
     if (this.popperClass) popperCl += ` ${this.popperClass}`
 
diff --git a/src/liquid/components/ld-select/readme.md b/src/liquid/components/ld-select/readme.md
index 11142d2d41..d1fa30b3a6 100644
--- a/src/liquid/components/ld-select/readme.md
+++ b/src/liquid/components/ld-select/readme.md
@@ -98,10 +98,81 @@ The feature set of the `ld-select` Web Component differs from its CSS Component
 </ld-select>
 {% endexample %}
 
+#### Width
+
+You may have noticed, that in multiple mode the component grows horizontally with the number of selected options. You can prevent this behaviour by either applying a `width` or a `max-width` style on the `ld-select` element:
+
+{% example %}
+<style>
+.my-select-width {
+  width: 14rem;
+}
+.my-select-max-width {
+  max-width: 24rem;
+}
+</style>
+
+<ld-select class="my-select-width" placeholder="Pick some fruits" name="fruits" multiple>
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana" selected>Banana</ld-option>
+  <ld-option value="strawberry" selected>Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry" selected>Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach" selected>Peach</ld-option>
+  <ld-option value="grape" selected>Grape</ld-option>
+  <ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear" selected>Pear</ld-option>
+  <ld-option value="pineapple" selected>Pineapple</ld-option>
+  <ld-option value="plum" selected>Plum</ld-option>
+</ld-select>
+
+<ld-select class="my-select-max-width" placeholder="Pick some fruits" name="fruits" multiple>
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana" selected>Banana</ld-option>
+  <ld-option value="strawberry" selected>Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry" selected>Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach" selected>Peach</ld-option>
+  <ld-option value="grape" selected>Grape</ld-option>
+  <ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear" selected>Pear</ld-option>
+  <ld-option value="pineapple" selected>Pineapple</ld-option>
+  <ld-option value="plum" selected>Plum</ld-option>
+</ld-select>
+{% endexample %}
+
 #### Max rows
 
+If you have limited vertical space (this may especially be the case on mobile devices), you can define a maximum of available rows of the select trigger element, which displays the current selection. 
+
 {% example %}
-<ld-select placeholder="Pick some fruits" name="fruits" multiple max-rows="2">
+<ld-select placeholder="Pick some fruits" name="fruits" multiple max-rows="1" style="width: 14rem">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana" selected>Banana</ld-option>
+  <ld-option value="strawberry" selected>Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry" selected>Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach" selected>Peach</ld-option>
+  <ld-option value="grape" selected>Grape</ld-option>
+  <ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear" selected>Pear</ld-option>
+  <ld-option value="pineapple" selected>Pineapple</ld-option>
+  <ld-option value="plum" selected>Plum</ld-option>
+</ld-select>
+
+<ld-select placeholder="Pick some fruits" name="fruits" multiple max-rows="2" style="max-width: 24rem">
   <ld-option value="apple">Apple</ld-option>
   <ld-option value="banana" selected>Banana</ld-option>
   <ld-option value="strawberry" selected>Strawberry</ld-option>
@@ -351,7 +422,7 @@ The feature set of the `ld-select` Web Component differs from its CSS Component
 ### Invalid
 
 {% example %}
-<ld-select placeholder="Pick a fruit" name="fruit" invalid mode="detached">
+<ld-select placeholder="Pick a fruit" name="fruit" invalid>
   <ld-option value="apple">Apple</ld-option>
   <ld-option value="banana">Banana</ld-option>
   <ld-option value="strawberry">Strawberry</ld-option>
@@ -427,6 +498,8 @@ The feature set of the `ld-select` Web Component differs from its CSS Component
 
 ### Detached
 
+In detached mode the component positions the popper element with a small vertical offset, effectively rendering a small gap between trigger button and popper element.
+
 {% example %}
 <ld-select placeholder="Pick a fruit" name="fruit" mode="detached">
   <ld-option value="apple">Apple</ld-option>
@@ -449,6 +522,8 @@ The feature set of the `ld-select` Web Component differs from its CSS Component
 
 ### Inline
 
+In inline mode, while the popper element has a minimum width, the component's trigger button width is defined by its content. Though you can still apply a `width` or `min-width` style on the trigger button, if you need to.
+
 {% example %}
 <ld-select placeholder="Pick a fruit" name="fruit" mode="inline">
   <ld-option value="apple">Apple</ld-option>
@@ -467,10 +542,48 @@ The feature set of the `ld-select` Web Component differs from its CSS Component
   <ld-option value="pineapple">Pineapple</ld-option>
   <ld-option value="plum">Plum</ld-option>
 </ld-select>
+
+<ld-select placeholder="Pick some fruits" name="fruits" multiple mode="inline">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
+
+<ld-select placeholder="Pick some fruits" name="fruits" multiple mode="inline" style="width: 6.9375rem" max-rows="1">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
 {% endexample %}
 
 ### Ghost
 
+In ghost mode the component works the same way as it does in inline mode while additionally rendering the background of the trigger button transparently. This mode is **not** combinable with the multiple select mode, because otherwise too many elements would potentially "loosely fly around" without any container establishing a connection between the elements.
+
 {% example %}
 <ld-select placeholder="Pick a fruit" name="fruit" mode="ghost">
   <ld-option value="apple">Apple</ld-option>
@@ -602,7 +715,6 @@ The feature set of the `ld-select` Web Component differs from its CSS Component
   <ld-option value="plum">Plum</ld-option>
 </ld-select>
 
-
 <!-- CSS component -->
 
 <div class='ld-select ld-select--sm'>
@@ -711,6 +823,152 @@ The feature set of the `ld-select` Web Component differs from its CSS Component
 </div>
 {% endexample %}
 
+### With custom trigger button icon
+
+For both, the ld-select Web Component and the CSS Component, you can use a custom trigger button icon in place of the default caret. If you want to apply theme colors, with the icon reacting to pseudo classes such as `:hover`, `:active` and `:focus`, use [`currentColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword) on your icon.
+
+{% example %}
+<ld-select placeholder="Pick a fruit" name="fruit" size="sm">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+  <ld-icon slot="icon" name="placeholder"></ld-icon>
+</ld-select>
+
+<ld-select placeholder="Pick a fruit" name="fruit">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+  <ld-icon slot="icon" name="placeholder"></ld-icon>
+</ld-select>
+
+<ld-select placeholder="Pick a fruit" name="fruit" size="lg">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+  <ld-icon slot="icon" name="placeholder"></ld-icon>
+</ld-select>
+
+<!-- CSS component -->
+
+<div class='ld-select ld-select--sm'>
+  <select name="fruits">
+    <option value="">Pick a fruit</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="strawberry">Strawberry</option>
+    <option value="watermelon" disabled>Watermelon</option>
+    <option value="honeymelon">Honeymelon</option>
+    <option value="rasberry">Rasberry</option>
+    <option value="cherry">Cherry</option>
+    <option value="blueberry">Blueberry</option>
+    <option value="peach">Peach</option>
+    <option value="grape">Grape</option>
+    <option value="fuyu persimmon">Fuyu Persimmon</option>
+    <option value="monstera deliciosa">Monstera Deliciosa</option>
+    <option value="pear">Pear</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="plum">Plum</option>
+  </select>
+  <span class="ld-icon" role="presentation">
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+    </svg>
+  </span>
+</div>
+
+<div class='ld-select'>
+  <select name="fruits">
+    <option value="">Pick a fruit</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="strawberry">Strawberry</option>
+    <option value="watermelon" disabled>Watermelon</option>
+    <option value="honeymelon">Honeymelon</option>
+    <option value="rasberry">Rasberry</option>
+    <option value="cherry">Cherry</option>
+    <option value="blueberry">Blueberry</option>
+    <option value="peach">Peach</option>
+    <option value="grape">Grape</option>
+    <option value="fuyu persimmon">Fuyu Persimmon</option>
+    <option value="monstera deliciosa">Monstera Deliciosa</option>
+    <option value="pear">Pear</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="plum">Plum</option>
+  </select>
+  <span class="ld-icon" role="presentation">
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+    </svg>
+  </span>
+</div>
+
+<div class='ld-select ld-select--lg'>
+  <select name="fruits">
+    <option value="">Pick a fruit</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="strawberry">Strawberry</option>
+    <option value="watermelon" disabled>Watermelon</option>
+    <option value="honeymelon">Honeymelon</option>
+    <option value="rasberry">Rasberry</option>
+    <option value="cherry">Cherry</option>
+    <option value="blueberry">Blueberry</option>
+    <option value="peach">Peach</option>
+    <option value="grape">Grape</option>
+    <option value="fuyu persimmon">Fuyu Persimmon</option>
+    <option value="monstera deliciosa">Monstera Deliciosa</option>
+    <option value="pear">Pear</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="plum">Plum</option>
+  </select>
+  <span class="ld-icon" role="presentation">
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+    </svg>
+  </span>
+</div>
+{% endexample %}
+
 ### With label
 
 {% example %}