diff --git a/src/components.d.ts b/src/components.d.ts
index c3954dfc083fceaefdf1c83a4a03f0ad33e77c43..bcd9703194df9ba6fac91a34d4f5a39e19c113d4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -56,12 +56,12 @@ import {PhaseValue} from './components/hy-large-process-flow-phase/hy-large-proc
 import {ImageSrcSet as ImageSrcSet4} from './components/link-box/link-box';
 import {LinkBox} from './components/link-box-list/link-box-list';
 import {CtaLinkValue} from './components/hy-link-list/hy-link-list';
-import {AdditionalInfo, RelatedLink} from './components/hy-list-item/hy-list-item';
+import {AdditionalInfo, ImageSrcSet as ImageSrcSet5, RelatedLink} from './components/hy-list-item/hy-list-item';
 import {MenuLanguage} from './components/navigation/menu-language/menu-language';
 import {ComponentLabels} from './components/site-header/site-header';
 import {DonateLink, MainMenu} from './components/navigation/hy-menu-main-group/hy-menu-main-group';
 import {ProcessFlowBoxValue} from './components/process/process';
-import {ImageSrcSet as ImageSrcSet5} from './components/hy-prominent-image/hy-prominent-image';
+import {ImageSrcSet as ImageSrcSet6} from './components/hy-prominent-image/hy-prominent-image';
 import {ShortcutLinkValue} from './components/hy-shortcuts/hy-shortcuts';
 import {DesktopLinks as DesktopLinks1} from './components/site-header/site-header';
 export namespace Components {
@@ -570,6 +570,7 @@ export namespace Components {
     relatedLinks?: RelatedLink[] | string;
     relatedLinksBlockTitle?: string;
     scLabel?: string;
+    sourceSet: ImageSrcSet[] | string;
     url?: string;
     variant: ListItemVariants;
   }
@@ -1988,6 +1989,7 @@ declare namespace LocalJSX {
     relatedLinks?: RelatedLink[] | string;
     relatedLinksBlockTitle?: string;
     scLabel?: string;
+    sourceSet?: ImageSrcSet[] | string;
     url?: string;
     variant?: ListItemVariants;
   }
diff --git a/src/components/hy-list-item/hy-list-item.tsx b/src/components/hy-list-item/hy-list-item.tsx
index 38f5aa3da9f235494c47b01469f0912b9c595a96..0b9a63137c12ff14584c6bc81153c68f6cda6366 100644
--- a/src/components/hy-list-item/hy-list-item.tsx
+++ b/src/components/hy-list-item/hy-list-item.tsx
@@ -10,6 +10,13 @@ export interface AdditionalInfo {
   isActive: boolean;
 }
 
+export interface ImageSrcSet {
+  src: any;
+  media: string;
+  type: string;
+  sizes: string | null;
+}
+
 import {Component, h, Prop, Watch, State, Listen, Element} from '@stencil/core';
 import {ListItemVariants} from '../../utils/utils';
 
@@ -44,6 +51,8 @@ export class HyListItem {
   private _additionalInfo: AdditionalInfo[];
   @Prop() additionalInfo?: AdditionalInfo[] | string;
   @Prop() headerstyle: string = 'common';
+  private _sourceSet: ImageSrcSet[];
+  @Prop() sourceSet: ImageSrcSet[] | string;
 
   @State() _imageMinHeight: number = 0;
   @State() _imageMinWidth: number = 0;
@@ -66,6 +75,10 @@ export class HyListItem {
     }
   }
 
+  @Watch('sourceSet') srcSetWatcher(data: ImageSrcSet[] | string) {
+    this._sourceSet = typeof data === 'string' ? JSON.parse(data) : data;
+  }
+
   expandRelatedInfoPanel(target) {
     let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;
     let targetButtonClass = 'hy-list-item-wrapper__degree__related-info__heading__button';
@@ -123,6 +136,7 @@ export class HyListItem {
   componentWillLoad() {
     this.relatedLinksWatcher(this.relatedLinks);
     this.additionalInfoWatcher(this.additionalInfo);
+    this.srcSetWatcher(this.sourceSet);
   }
 
   componentDidLoad() {
@@ -242,16 +256,26 @@ export class HyListItem {
             <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
               <div class={classImageContainerAttributes}>
                 <div class={classImageContainerImage}>
-                  <img
-                    loading={this.disableLazy ? 'eager' : 'lazy'}
-                    aria-hidden="true"
-                    alt={this.itemImageAlt}
-                    src={this.itemImageUrl}
-                    style={{
-                      '--minheight': `${this._imageMinHeight}px` as 'minHeight',
-                      '--minwidth': `${this._imageMinWidth}px` as 'minWidth',
-                    }}
-                  />
+                  <picture>
+                    {this._sourceSet.map((item) => (
+                      <source
+                        srcSet={item.src}
+                        media={item.media}
+                        type={item.type}
+                        sizes={item.sizes ? item.sizes : ''}
+                      />
+                    ))}
+                    <img
+                      loading={this.disableLazy ? 'eager' : 'lazy'}
+                      aria-hidden="true"
+                      src={this.itemImageUrl}
+                      alt={this.itemImageAlt}
+                      style={{
+                        '--minheight': `${this._imageMinHeight}px` as 'minHeight',
+                        '--minwidth': `${this._imageMinWidth}px` as 'minWidth',
+                      }}
+                    />
+                  </picture>
                 </div>
                 {this.imageLabel && <span>{this.imageLabel}</span>}
               </div>
diff --git a/src/components/hy-list-item/readme.md b/src/components/hy-list-item/readme.md
index 971c44ad498a10bb0781fcb2612a85abf2a23a9e..2994e66ab77d6d08e3cd7d31a2af810bb7bc3e2a 100644
--- a/src/components/hy-list-item/readme.md
+++ b/src/components/hy-list-item/readme.md
@@ -20,6 +20,7 @@
 | `relatedLinks`           | `related-links`             |             | `RelatedLink[] \| string`                                      | `undefined`                |
 | `relatedLinksBlockTitle` | `related-links-block-title` |             | `string`                                                       | `undefined`                |
 | `scLabel`                | `sc-label`                  |             | `string`                                                       | `undefined`                |
+| `sourceSet`              | `source-set`                |             | `ImageSrcSet[] \| string`                                      | `undefined`                |
 | `url`                    | `url`                       |             | `string`                                                       | `undefined`                |
 | `variant`                | `variant`                   |             | `ListItemVariants.default \| ListItemVariants.degreeProgramme` | `ListItemVariants.default` |