diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
index df159d3a..b0604470 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.component.ts
@@ -182,21 +182,58 @@ export class FhiTextInput extends LitElement {
     this._internals.setFormValue(this.value);
   }
 
+  private _handleStartSlotChange(event: Event): void {
+    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];
+    if (
+      iconNode.nodeType === Node.ELEMENT_NODE &&
+      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
+    ) {
+      const icon = iconNode as HTMLElement;
+      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';
+      icon.setAttribute('size', '1.5rem');
+    } else {
+      console.error(
+        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
+      );
+    }
+  }
+
+  private _handleEndSlotChange(event: Event): void {
+    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];
+
+    if (
+      iconNode.nodeType === Node.ELEMENT_NODE &&
+      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')
+    ) {
+      const icon = iconNode as HTMLElement;
+      this._input.style.paddingRight = 'var(--fhi-spacing-500)';
+      icon.setAttribute('size', '1.5rem');
+    } else {
+      console.error(
+        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',
+      );
+    }
+  }
+
   render() {
     return html`
       ${this.label && html`<label for="input-element">${this.label}</label>`}
       ${this.helpText ? html`<p class="help-text">${this.helpText}</p>` : ''}
-      <input
-        id="input-element"
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        .value=${this.value}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @keydown=${this.handleKeyDown}
-      />
+      <div class="input-container">
+        <input
+          id="input-element"
+          name=${ifDefined(this.name)}
+          placeholder=${ifDefined(this.placeholder)}
+          .value=${this.value}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeyDown}
+        />
+        <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
+        <slot name="end" @slotchange=${this._handleEndSlotChange}> </slot>
+      </div>
       ${this.message ? html`<p class="message">${this.message}</p>` : ''}
     `;
   }
@@ -347,6 +384,18 @@ export class FhiTextInput extends LitElement {
         }
       }
 
+      slot[name='start'] {
+        color: var(--fhi-color-neutral-text-subtle);
+      }
+
+      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {
+        color: var(--fhi-color-accent-text-subtle);
+      }
+      input:not([disabled]):not([readonly]):active ~ slot[name='start'],
+      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {
+        color: var(--fhi-color-accent-text-default);
+      }
+
       .message {
         margin: var(--dimension-message-margin-top) 0 0 0;
         color: var(--color-message-text);
@@ -364,6 +413,34 @@ export class FhiTextInput extends LitElement {
         letter-spacing: var(--typography-help-text-letter-spacing);
         margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
       }
+
+      .input-container {
+        position: relative;
+        width: fit-content;
+      }
+
+      slot[name='start'] {
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 8px;
+        height: fit-content;
+        pointer-events: none;
+      }
+
+      slot[name='end'] {
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-right: 8px;
+        height: fit-content;
+        pointer-events: none;
+        color: var(--fhi-color-neutral-text-subtle);
+      }
     }
 
     :host([disabled]) {
@@ -406,6 +483,16 @@ export class FhiTextInput extends LitElement {
       .help-text {
         color: var(--color-help-text-text-error);
       }
+      slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+
+      input:hover ~ slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+      input:focus ~ slot[name='start'] {
+        color: var(--fhi-color-danger-text-subtle);
+      }
     }
   `;
 }
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
index 1957ae00..d91f6016 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.docs.mdx
@@ -29,6 +29,16 @@ Text Input lar brukere skrive inn data, slik som navn, telefonnumre og e-postadr
 Uttrykker at noe mangler eller er skrevet feil.
 <Canvas of={FhiTextInputStories.Error} />
 
+### Ikon
+
+Ikon kan settes til venstre i feltet for å gi visuelle signaler om hvilken data man etterspør. Noen eksempler kan være en konvolutt for e-postadresse, en nøkkel eller lås for passord og bruker for navn eller brukernavn. 
+
+Bruk ikon med omhu. Ethvert ikon er et nytt visuelt element som brukeren må forholde seg til. Det kan bli mange på skjermen samtidig, noe som kan føles unødvendig travelt ut. 
+
+Hvis ikonet skal være knyttet til en handling, settes det til høyre. Dette kan for eksempel være å la brukeren nullstille verdien eller vise og skjule passordet man skriver inn. Dette kan også vurderes til å indikere validering, om svaret er gyldig eller ikke.
+
+<Canvas of={FhiTextInputStories.WithIcon} />
+
 ### Form Controls
 #### `readonly`
 Gjør at feltet ikke kan endres. Feltet vil fortsatt kunne fokuseres og vil automatisk bli inkludert i FormData.
diff --git a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
index 7bc07f34..ebbfbae4 100644
--- a/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
+++ b/packages/fhi-designsystem/src/components/fhi-text-input/fhi-text-input.stories.ts
@@ -6,8 +6,12 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { FhiStorybookMeta } from '../../../.storybook/fhi-meta';
 import { FhiTextInput } from './fhi-text-input.component';
+import { FhiIconUser } from '../icons/fhi-icon-user.component';
+import { FhiIconSearch } from '../icons/fhi-icon-search.component';
 
 new FhiTextInput();
+new FhiIconUser();
+new FhiIconSearch();
 
 const meta: FhiStorybookMeta<FhiTextInput> = {
   title: 'Komponenter/Text Input',
@@ -32,8 +36,25 @@ const meta: FhiStorybookMeta<FhiTextInput> = {
         valueLocation: ['event.target.value'],
       },
     ],
+    slotTypes: [
+      {
+        name: 'start',
+        description: 'Ikon på venstre side i inputfeltet.',
+      },
+      {
+        name: 'end',
+        description: 'Ikon på høyre side i inputfeltet.',
+      },
+    ],
   },
-  decorators: [story => html`<div style="max-width: 400px;">${story()}</div>`],
+  decorators: [
+    story =>
+      html`<div
+        style="max-width: 400px; display: flex; flex-wrap: wrap; gap: 10px;"
+      >
+        ${story()}
+      </div>`,
+  ],
   render: args =>
     html`<fhi-text-input
       label=${ifDefined(args.label)}
@@ -187,4 +208,37 @@ export const WithDisabledLabel: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  name: 'Icon',
+
+  parameters: {
+    controls: {
+      exclude: [
+        'name',
+        'value',
+        'label',
+        'message',
+        'help-text',
+        'placeholder',
+      ],
+    },
+  },
+  render: args => html`
+    <fhi-text-input
+      label="Brukernavn"
+      status=${ifDefined(args.status)}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
+      ><fhi-icon-user slot="start"></fhi-icon-user
+    ></fhi-text-input>
+    <fhi-text-input
+      label="Søk"
+      status=${ifDefined(args.status)}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
+      ><fhi-icon-search slot="end"></fhi-icon-search
+    ></fhi-text-input>
+  `,
+};
+
 export default meta;