From 4ea38cb4e1048652f5a876eb7002fb835fb32aa0 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 16 Sep 2026 02:05:27 +0300
Subject: [PATCH 1/2] feat(qr-code): add samples

---
 .../data-display/data-display-routes-data.ts  |  5 ++-
 src/app/data-display/data-display.routes.ts   | 18 ++++++++
 .../qr-code-overview.component.html           | 26 +++++++++++
 .../qr-code-overview.component.scss           | 31 +++++++++++++
 .../qr-code-overview.component.ts             | 23 ++++++++++
 .../qr-code-styling.component.html            |  8 ++++
 .../qr-code-styling.component.scss            | 36 +++++++++++++++
 .../qr-code-styling.component.ts              | 14 ++++++
 .../qr-code-tailwind-styling.component.html   | 44 +++++++++++++++++++
 .../qr-code-tailwind-styling.component.scss   | 16 +++++++
 .../qr-code-tailwind-styling.component.ts     | 13 ++++++
 11 files changed, 233 insertions(+), 1 deletion(-)
 create mode 100644 src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.ts

diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 39ceef1ea..f87d7bf80 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -43,5 +43,8 @@ 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-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 de1538d48..4416a7e95 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -49,6 +49,9 @@ 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';
 
@@ -282,5 +285,20 @@ 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: QrCodeStylingComponent,
+        data: dataDisplayRoutesData['qr-code-styling'],
+        path: 'qr-code-styling'
+    },
+    {
+        component: QrCodeTailwindStylingComponent,
+        data: dataDisplayRoutesData['qr-code-tailwind-styling'],
+        path: 'qr-code-tailwind-styling'
     }
 ];
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..dafeba766
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.html
@@ -0,0 +1,26 @@
+<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"
+></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..5794a7e78
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
@@ -0,0 +1,31 @@
+@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;
+}
+
+.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;
+    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..c5f3729bd
--- /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-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..8db4d5910
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
@@ -0,0 +1,36 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.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..c2165eaee
--- /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..64d2c3273
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.html
@@ -0,0 +1,44 @@
+<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"
+    logo-margin="6"
+    class="[--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"
+    logo-margin="6"
+    class="[--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"
+    logo-margin="6"
+    class="[--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"
+    logo-margin="6"
+    class="[--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>
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..a1cde3ae4
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component.scss
@@ -0,0 +1,16 @@
+:host {
+    display: flex;
+    gap: 1.5rem;
+    padding: 1rem;
+    background: #111;
+    width: fit-content;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-inline: auto;
+}
+
+@media (width < 800px) {
+    :host {
+        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..171cb8654
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.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-tailwind-styling',
+    templateUrl: './qr-code-tailwind-styling.component.html',
+    styleUrls: ['./qr-code-tailwind-styling.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: []
+})
+export class QrCodeTailwindStylingComponent { }

From 32329406a9826034e74539cffceed9fbada6675d Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Thu, 17 Sep 2026 19:11:42 +0300
Subject: [PATCH 2/2] feat(qr-code): additional samples and fixes

---
 .../data-display/data-display-routes-data.ts  |  4 ++
 src/app/data-display/data-display.routes.ts   | 25 ++++++++
 .../qr-code-error-correction.component.html   | 12 ++++
 .../qr-code-error-correction.component.scss   | 23 +++++++
 .../qr-code-error-correction.component.ts     | 13 ++++
 .../qr-code-logo/qr-code-logo.component.html  |  1 +
 .../qr-code-logo/qr-code-logo.component.scss  |  4 ++
 .../qr-code-logo/qr-code-logo.component.ts    | 14 +++++
 .../qr-code-overview.component.scss           |  2 +
 .../qr-code-shapes.component.html             | 12 ++++
 .../qr-code-shapes.component.scss             | 23 +++++++
 .../qr-code-shapes.component.ts               | 13 ++++
 .../qr-code-size/qr-code-size.component.html  | 12 ++++
 .../qr-code-size/qr-code-size.component.scss  | 23 +++++++
 .../qr-code-size/qr-code-size.component.ts    | 14 +++++
 .../qr-code-styling.component.scss            |  3 +-
 .../qr-code-tailwind-styling.component.html   | 63 ++++++-------------
 .../qr-code-tailwind-styling.component.scss   |  8 ++-
 18 files changed, 223 insertions(+), 46 deletions(-)
 create mode 100644 src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts
 create mode 100644 src/app/data-display/qr-code/qr-code-size/qr-code-size.component.html
 create mode 100644 src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
 create mode 100644 src/app/data-display/qr-code/qr-code-size/qr-code-size.component.ts

diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index f87d7bf80..6dce452ba 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -45,6 +45,10 @@ export const dataDisplayRoutesData = {
     "text-highlight-2": { displayName: "Search within multiple containers", 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-shapes": { displayName: "QR Code 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 4416a7e95..16ede5720 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -54,6 +54,10 @@ import { QrCodeStylingComponent } from './qr-code/qr-code-styling/qr-code-stylin
 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 { QrCodeShapesComponent } from './qr-code/qr-code-shapes/qr-code-shapes.component';
+import { QrCodeLogoComponent } from './qr-code/qr-code-logo/qr-code-logo.component';
 
 export const DataDisplayRoutes: Routes = [
     {
@@ -291,11 +295,32 @@ export const DataDisplayRoutes: Routes = [
         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: QrCodeShapesComponent,
+        data: dataDisplayRoutesData['qr-code-shapes'],
+        path: 'qr-code-shapes'
+    },
+    {
+        component: QrCodeLogoComponent,
+        data: dataDisplayRoutesData['qr-code-logo'],
+        path: 'qr-code-logo'
+    },
+
     {
         component: QrCodeTailwindStylingComponent,
         data: dataDisplayRoutesData['qr-code-tailwind-styling'],
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..faa3fa0f9
--- /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..49f1e101c
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-error-correction/qr-code-error-correction.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@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..f6a9e2d59
--- /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..6cbe31921
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-logo/qr-code-logo.component.html
@@ -0,0 +1 @@
+<igc-qr-code value="https://www.infragistics.com/" logo-size="1" error-level="H" [attr.logo-src]="logoSrc"></igc-qr-code>
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..63ad259ef
--- /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.scss b/src/app/data-display/qr-code/qr-code-overview/qr-code-overview.component.scss
index 5794a7e78..67e4e7915 100644
--- 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
@@ -13,6 +13,7 @@
     align-items: center;
     gap: 2.5rem;
     overflow-y: auto;
+    height: 100%;
 }
 
 .qr-controls {
@@ -27,5 +28,6 @@ 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-shapes/qr-code-shapes.component.html b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
new file mode 100644
index 000000000..bf7afd061
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.html
@@ -0,0 +1,12 @@
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="square" square-style="square"></igc-qr-code>
+    <span>dot and square style: <strong>square</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="circle" square-style="circle">></igc-qr-code>
+    <span>dot and square style: <strong>circle</strong></span>
+</div>
+<div>
+    <igc-qr-code value="https://www.infragistics.com" dot-style="rounded" square-style="rounded">></igc-qr-code>
+    <span>dot and square style: <strong>rounded</strong></span>
+</div>
diff --git a/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
new file mode 100644
index 000000000..49f1e101c
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@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-shapes/qr-code-shapes.component.ts b/src/app/data-display/qr-code/qr-code-shapes/qr-code-shapes.component.ts
new file mode 100644
index 000000000..42ac4674c
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-shapes/qr-code-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-shapes',
+    templateUrl: './qr-code-shapes.component.html',
+    styleUrls: ['./qr-code-shapes.component.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class QrCodeShapesComponent {
+}
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..ec38f6605
--- /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..561d30de2
--- /dev/null
+++ b/src/app/data-display/qr-code/qr-code-size/qr-code-size.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    align-items: baseline;
+    gap: 3.75rem;
+    justify-content: center;
+    flex-direction: row;
+    overflow-y: auto;
+    height: 100%;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@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..693fbe969
--- /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.scss b/src/app/data-display/qr-code/qr-code-styling/qr-code-styling.component.scss
index 8db4d5910..b748a9283 100644
--- 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
@@ -4,7 +4,8 @@
     gap: 3.75rem;
     justify-content: center;
     flex-direction: row;
-    flex-wrap: wrap;
+    overflow-y: auto;
+    height: 100%;
 }
 
 .qr-blue {
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
index 64d2c3273..7e1017750 100644
--- 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
@@ -1,44 +1,19 @@
-<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"
-    logo-margin="6"
-    class="[--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"
-    logo-margin="6"
-    class="[--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"
-    logo-margin="6"
-    class="[--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"
-    logo-margin="6"
-    class="[--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 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="[--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="[--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="[--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="[--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
index a1cde3ae4..53ba8128a 100644
--- 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
@@ -1,4 +1,10 @@
 :host {
+    display: block;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.container {
     display: flex;
     gap: 1.5rem;
     padding: 1rem;
@@ -10,7 +16,7 @@
 }
 
 @media (width < 800px) {
-    :host {
+    .container {
         flex-direction: column;
     }
 }
\ No newline at end of file