diff --git a/lib/components/input-icon/input-icon.a11y.test.ts b/lib/components/input-icon/input-icon.a11y.test.ts
new file mode 100644
index 0000000000..009c849a83
--- /dev/null
+++ b/lib/components/input-icon/input-icon.a11y.test.ts
@@ -0,0 +1,81 @@
+import { html } from "@open-wc/testing";
+import { runA11yTests } from "../../test/a11y-test-utils";
+import "../../index";
+
+const modifiers = [
+ {
+ name: "error",
+ parentClasses: "has-error",
+ },
+ {
+ name: "success",
+ parentClasses: "has-success",
+ },
+ {
+ name: "warning",
+ parentClasses: "has-warning",
+ },
+ {
+ name: "disabled",
+ parentClasses: "is-disabled",
+ },
+ {
+ name: "readonly",
+ parentClasses: "is-readonly",
+ },
+ {
+ name: "creditcard",
+ modifier: "creditcard",
+ inputClasses: "s-input__creditcard",
+ },
+ {
+ name: "search",
+ modifier: "search",
+ inputClasses: "s-input__search",
+ },
+];
+
+const getSvgPath = (name: string) => {
+ switch (name) {
+ case "creditcard":
+ return '';
+ case "search":
+ return '';
+ default:
+ return ''; // eye icon path
+ }
+};
+
+describe("input-icon", () => {
+ modifiers.forEach(({ name, parentClasses, modifier }) => {
+ runA11yTests({
+ baseClass: `s-input-icon`,
+ tag: "svg",
+ children: {
+ [name]: getSvgPath(name), // IconSearch
+ },
+ modifiers: {
+ standalone: modifier ? [`${modifier}`] : [],
+ global: parentClasses ? [`parent-${parentClasses}`] : [],
+ },
+ attributes: {
+ "aria-hidden": "true",
+ "width": "18",
+ "height": "18",
+ "viewBox": "0 0 18 18",
+ },
+ template: ({ component, testid }) => html`
+
+ `,
+ options: {
+ includeNullModifier: false,
+ },
+ });
+ });
+});
diff --git a/lib/components/input-icon/input-icon.visual.test.ts b/lib/components/input-icon/input-icon.visual.test.ts
new file mode 100644
index 0000000000..153f4f1ea8
--- /dev/null
+++ b/lib/components/input-icon/input-icon.visual.test.ts
@@ -0,0 +1,92 @@
+import { html } from "@open-wc/testing";
+import { runVisualTests } from "../../test/visual-test-utils";
+import "../../index";
+
+const modifiers = [
+ {
+ name: "error",
+ parentClasses: "has-error",
+ },
+ {
+ name: "success",
+ parentClasses: "has-success",
+ },
+ {
+ name: "warning",
+ parentClasses: "has-warning",
+ },
+ {
+ name: "disabled",
+ parentClasses: "is-disabled",
+ },
+ {
+ name: "readonly",
+ parentClasses: "is-readonly",
+ },
+ {
+ name: "creditcard",
+ modifier: "creditcard",
+ inputClasses: "s-input__creditcard",
+ },
+ {
+ name: "search",
+ modifier: "search",
+ inputClasses: "s-input__search",
+ },
+];
+
+const getSvgPath = (name: string) => {
+ switch (name) {
+ case "creditcard":
+ return '';
+ case "search":
+ return '';
+ default:
+ return ''; // eye icon path
+ }
+};
+
+describe("input-icon", () => {
+ modifiers.forEach(({ name, parentClasses, modifier, inputClasses }) => {
+ runVisualTests({
+ baseClass: `s-input-icon`,
+ tag: "svg",
+ children: {
+ [name]: getSvgPath(name), // IconSearch
+ },
+ modifiers: {
+ standalone: modifier ? [`${modifier}`] : [],
+ global: parentClasses ? [`parent-${parentClasses}`] : [],
+ },
+ attributes: {
+ "aria-hidden": "true",
+ "width": "18",
+ "height": "18",
+ "viewBox": "0 0 18 18",
+ },
+ template: ({ component, testid }) => html`
+
+
+
+
+ ${component}
+
+