diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index d87443d0a..9d197973f 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -49,5 +49,13 @@ export const dataDisplayRoutesData = {
     "mask-sample-5": { displayName: "Placeholder", parentName: "Mask" },
     "text-highlight-1": { displayName: "Search within a single container", parentName: "Text Highlight" },
     "text-highlight-2": { displayName: "Search within multiple containers", parentName: "Text Highlight" },
-    "text-highlight-style": { displayName: "Text Highlight Style", parentName: "Text Highlight" }
+    "text-highlight-style": { displayName: "Text Highlight Style", parentName: "Text Highlight" },
+    "qr-code-overview": { displayName: "Overview", parentName: "QR Code" },
+    "qr-code-error-correction": { displayName: "QR Code Error Correction", parentName: "QR Code" },
+    "qr-code-size": { displayName: "QR Code Size", parentName: "QR Code" },
+    "qr-code-dot-shapes": { displayName: "QR Code Dot Shapes", parentName: "QR Code" },
+    "qr-code-corner-shapes": { displayName: "QR Code Corner Shapes", parentName: "QR Code" },
+    "qr-code-logo": { displayName: "QR Code Logo", parentName: "QR Code" },
+    "qr-code-styling": { displayName: "QR Code Styling", parentName: "QR Code" },
+    "qr-code-tailwind-styling": { displayName: "QR Code Tailwind Styling", parentName: "QR Code" }
 };
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index e4acd8e72..0c0584b65 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -55,8 +55,16 @@ import { TextHighlightStyleComponent } from './text-highlight/text-highlight-sty
 import {
     MaterialIconsExtendedComponent} from './icon/material-icons-extended/material-icons-extended.component';
 import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbols.component';
+import { QrCodeOverviewComponent } from './qr-code/qr-code-overview/qr-code-overview.component';
+import { QrCodeStylingComponent } from './qr-code/qr-code-styling/qr-code-styling.component';
+import { QrCodeTailwindStylingComponent } from './qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component';
 import { dataDisplayRoutesData } from './data-display-routes-data';
 import { Routes } from '@angular/router';
+import { QrCodeErrorCorrectionComponent } from './qr-code/qr-code-error-correction/qr-code-error-correction.component';
+import { QrCodeSizeComponent } from './qr-code/qr-code-size/qr-code-size.component';
+import { QrCodeDotShapesComponent } from './qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component';
+import { QrCodeCornerShapesComponent } from './qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component';
+import { QrCodeLogoComponent } from './qr-code/qr-code-logo/qr-code-logo.component';
 
 export const DataDisplayRoutes: Routes = [
     {
@@ -318,5 +326,46 @@ export const DataDisplayRoutes: Routes = [
         component: MaterialIconsExtendedComponent,
         data: dataDisplayRoutesData['material-icons-extended'],
         path: 'material-icons-extended'
+    },
+    {
+        component: QrCodeOverviewComponent,
+        data: dataDisplayRoutesData['qr-code-overview'],
+        path: 'qr-code-overview'
+    },
+    {
+        component: QrCodeErrorCorrectionComponent,
+        data: dataDisplayRoutesData['qr-code-error-correction'],
+        path: 'qr-code-error-correction'
+    },
+    {
+        component: QrCodeSizeComponent,
+        data: dataDisplayRoutesData['qr-code-size'],
+        path: 'qr-code-size'
+    },
+    {
+        component: QrCodeStylingComponent,
+        data: dataDisplayRoutesData['qr-code-styling'],
+        path: 'qr-code-styling'
+    },
+    {
+        component: QrCodeDotShapesComponent,
+        data: dataDisplayRoutesData['qr-code-dot-shapes'],
+        path: 'qr-code-dot-shapes'
+    },
+    {
+        component: QrCodeCornerShapesComponent,
+        data: dataDisplayRoutesData['qr-code-corner-shapes'],
+        path: 'qr-code-corner-shapes'
+    },
+    {
+        component: QrCodeLogoComponent,
+        data: dataDisplayRoutesData['qr-code-logo'],
+        path: 'qr-code-logo'
+    },
+
+    {
+        component: QrCodeTailwindStylingComponent,
+        data: dataDisplayRoutesData['qr-code-tailwind-styling'],
+        path: 'qr-code-tailwind-styling'
     }
 ];
diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
new file mode 100644
index 000000000..9d4298ed7
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" square-style="square"></igc-qr-code>
+    <span>Square style: <strong>square</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" square-style="circle"></igc-qr-code>
+    <span>Square style: <strong>circle</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" square-style="rounded"></igc-qr-code>
+    <span>Square style: <strong>rounded</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
new file mode 100644
index 000000000..29dc35306
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.scss
@@ -0,0 +1,29 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
new file mode 100644
index 000000000..882bfce59
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-corner-shapes/qr-code-corner-shapes.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-corner-shapes',
+    templateUrl: './qr-code-corner-shapes.component.html',
+    styleUrls: ['./qr-code-corner-shapes.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class QrCodeCornerShapesComponent {
+}
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
new file mode 100644
index 000000000..af3cf80ce
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="square"></igc-qr-code>
+    <span>Dot style: <strong>square</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="circle"></igc-qr-code>
+    <span>Dot style: <strong>circle</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="rounded"></igc-qr-code>
+    <span>Dot style: <strong>rounded</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
new file mode 100644
index 000000000..29dc35306
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.scss
@@ -0,0 +1,29 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
new file mode 100644
index 000000000..8ad0cc61e
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-dot-shapes/qr-code-dot-shapes.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-dot-shapes',
+    templateUrl: './qr-code-dot-shapes.component.html',
+    styleUrls: ['./qr-code-dot-shapes.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class QrCodeDotShapesComponent {
+}
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
new file mode 100644
index 000000000..be9ca34e2
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" error-level="L">></igc-qr-code>
+    <span>Error level: <strong>L</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" error-level="M">></igc-qr-code>
+    <span>Error level: <strong>M</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" error-level="Q">></igc-qr-code>
+    <span>Error level: <strong>Q</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
new file mode 100644
index 000000000..29dc35306
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
@@ -0,0 +1,29 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
new file mode 100644
index 000000000..3790218fc
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-error-correction',
+    templateUrl: './qr-code-error-correction.component.html',
+    styleUrls: ['./qr-code-error-correction.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class QrCodeErrorCorrectionComponent {
+}
diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
new file mode 100644
index 000000000..69175e421
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
@@ -0,0 +1,2 @@
+<igc-qr-code value="https://www.infragistics.com/" logo-size="1" logo-margin="2" error-level="H"
+    [attr.logo-src]="logoSrc"></igc-qr-code>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss
new file mode 100644
index 000000000..f21bc9f9b
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss
@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    justify-content: center;
+}
diff --git a/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
new file mode 100644
index 000000000..03601dda0
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
@@ -0,0 +1,14 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-logo',
+    templateUrl: './qr-code-logo.component.html',
+    styleUrls: ['./qr-code-logo.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class QrCodeLogoComponent {
+    public readonly logoSrc = 'https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg';
+}
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
new file mode 100644
index 000000000..cb914d862
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
@@ -0,0 +1,27 @@
+<div class="qr-controls">
+    <igx-radio-group [(ngModel)]="shape" name="shape">
+        <igx-radio value="square" checked>Square</igx-radio>
+        <igx-radio value="circle">Circle</igx-radio>
+        <igx-radio value="rounded">Rounded</igx-radio>
+    </igx-radio-group>
+
+    <igx-radio-group [(ngModel)]="size" name="size">
+        <igx-radio [value]="120" checked>Small</igx-radio>
+        <igx-radio [value]="180">Medium</igx-radio>
+        <igx-radio [value]="240">Large</igx-radio>
+        <igx-radio [value]="300">Extra large</igx-radio>
+    </igx-radio-group>
+
+    <igx-switch [(ngModel)]="showLogo" labelPosition="before">Logo</igx-switch>
+</div>
+
+<igc-qr-code
+    [value]="value"
+    [attr.size]="size"
+    [attr.dot-style]="shape"
+    [attr.square-style]="shape"
+    error-level="H"
+    [attr.logo-src]="showLogo ? logoSrc : null"
+    logo-size="1"
+    logo-margin="3"
+></igc-qr-code>
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
new file mode 100644
index 000000000..67e4e7915
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
@@ -0,0 +1,33 @@
+@use 'igniteui-angular/theming' as *;
+
+@include core();
+
+:host::ng-deep {
+    @include theme($palette: $light-bootstrap-palette,
+        $schema: $light-bootstrap-schema);
+}
+
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2.5rem;
+    overflow-y: auto;
+    height: 100%;
+}
+
+.qr-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2.5rem;
+}
+
+igx-radio-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: fit-content;
+    gap: 0.25rem;
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
new file mode 100644
index 000000000..90bdb4718
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
@@ -0,0 +1,23 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+import { IgxRadioGroupDirective, IgxRadioComponent } from 'igniteui-angular/radio';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-overview',
+    templateUrl: './qr-code-overview.component.html',
+    styleUrls: ['./qr-code-overview.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [FormsModule, IgxRadioGroupDirective, IgxRadioComponent, IgxSwitchComponent]
+})
+export class QrCodeOverviewComponent {
+    public shape: 'square' | 'circle' | 'rounded' = 'square';
+    public size = 120;
+    public showLogo = true;
+
+    public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
+    public readonly logoSrc = 'https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg';
+}
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
new file mode 100644
index 000000000..dc437fda3
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" size="128">></igc-qr-code>
+    <span>Size: <strong>128px</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" size="192">></igc-qr-code>
+    <span>Size: <strong>192px</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" size="256">></igc-qr-code>
+    <span>Size: <strong>256px</strong></span>
+</div>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
new file mode 100644
index 000000000..0219154c6
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
@@ -0,0 +1,29 @@
+:host {
+    display: flex;
+    align-items: baseline;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+    font-family: "Aktiv Grotesk", sans-serif;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+span {
+    margin-block-start: 1rem;
+    color: var(--ig-gray-600);
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts
new file mode 100644
index 000000000..173efa4b8
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts
@@ -0,0 +1,14 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-size',
+    templateUrl: './qr-code-size.component.html',
+    styleUrls: ['./qr-code-size.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class QrCodeSizeComponent {
+    public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
+}
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html
new file mode 100644
index 000000000..6b00fc2b6
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html
@@ -0,0 +1,8 @@
+<igc-qr-code class="qr-blue" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
+<igc-qr-code class="qr-orange" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
+<igc-qr-code class="qr-green" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
+<igc-qr-code class="qr-dark" [value]="value" size="150" dot-style="rounded" square-style="rounded"
+    error-level="H"></igc-qr-code>
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
new file mode 100644
index 000000000..b748a9283
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
@@ -0,0 +1,37 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+.qr-blue {
+    --ig-qr-code-background: #e3edfb;
+    --ig-qr-code-dark-color: #1361e0;
+}
+
+.qr-orange {
+    --ig-qr-code-background: #fbe6e1;
+    --ig-qr-code-dark-color: #f0562b;
+}
+
+.qr-green {
+    --ig-qr-code-background: #e5f7e6;
+    --ig-qr-code-dark-color: #3fa845;
+}
+
+.qr-dark {
+    --ig-qr-code-background: #0b1b3a;
+    --ig-qr-code-dark-color: #ffffff;
+}
+
+@media (width < 850px) {
+    :host {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
new file mode 100644
index 000000000..7fa845603
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
@@ -0,0 +1,14 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-styling',
+    templateUrl: './qr-code-styling.component.html',
+    styleUrls: ['./qr-code-styling.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class QrCodeStylingComponent {
+    public readonly value = 'https://www.infragistics.com/products/ignite-ui-web-components';
+}
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
new file mode 100644
index 000000000..22a1bb3e2
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
@@ -0,0 +1,19 @@
+<div class="container">
+    <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/JavaScript" size="150" error-level="H"
+        dot-style="circle" square-style="rounded"
+        logo-src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" logo-size="0.75"
+        class="!light-qr-code [--ig-qr-code-dark-color:#1a1a1a] [--ig-qr-code-background:#f7df1e] [--ig-qr-code-corner-square-color:#1a1a1a] [--ig-qr-code-corner-dot-color:#1a1a1a]"></igc-qr-code>
+    <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/HTML" size="150" error-level="H" dot-style="circle"
+        square-style="rounded"
+        logo-src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" logo-size="0.75"
+        class="!light-qr-code [--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#e44d26] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
+    <igc-qr-code value="https://developer.mozilla.org/en-US/docs/Web/CSS" size="150" error-level="H" dot-style="circle"
+        square-style="rounded" logo-src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg"
+        logo-size="0.75"
+        class="!light-qr-code [--ig-qr-code-dark-color:#ffffff] [--ig-qr-code-background:#1572b6] [--ig-qr-code-corner-square-color:#ffffff] [--ig-qr-code-corner-dot-color:#ffffff]"></igc-qr-code>
+    <igc-qr-code value="https://www.infragistics.com/products/ignite-ui-web-components" size="150" error-level="H"
+        dot-style="circle" square-style="rounded"
+        logo-src="https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg"
+        logo-size="0.75"
+        class="!light-qr-code [--ig-qr-code-dark-color:#0f172a] [--ig-qr-code-background:#ffffff] [--ig-qr-code-corner-square-color:#0f172a] [--ig-qr-code-corner-dot-color:#0f172a]"></igc-qr-code>
+</div>
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
new file mode 100644
index 000000000..53ba8128a
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
@@ -0,0 +1,22 @@
+:host {
+    display: block;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.container {
+    display: flex;
+    gap: 1.5rem;
+    padding: 1rem;
+    background: #111;
+    width: fit-content;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-inline: auto;
+}
+
+@media (width < 800px) {
+    .container {
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts
new file mode 100644
index 000000000..16a0739ba
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts
@@ -0,0 +1,12 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcQrCodeComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcQrCodeComponent);
+
+@Component({
+    selector: 'app-qr-code-tailwind-styling',
+    templateUrl: './qr-code-tailwind-styling.component.html',
+    styleUrls: ['./qr-code-tailwind-styling.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class QrCodeTailwindStylingComponent { }