Gentleface › Layout & interface › input-text

input-text icon

Input text: text field, text input, input field, textbox. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.105 13.052C6.182 13.245 6.293 13.414 6.439 13.561C6.586 13.707 6.755 13.818 6.948 13.895C7.125 13.965 7.309 14 7.5 14C7.641 14 7.759 14.048 7.856 14.144C7.952 14.241 8 14.359 8 14.5C8 14.641 7.952 14.759 7.856 14.856C7.759 14.952 7.641 15 7.5 15C7.182 15 6.875 14.941 6.58 14.824C6.259 14.697 5.976 14.512 5.732 14.268C5.648 14.183 5.57 14.094 5.5 14.001C5.43 14.094 5.352 14.183 5.268 14.268C5.024 14.512 4.741 14.697 4.42 14.824C4.125 14.941 3.818 15 3.5 15C3.359 15 3.241 14.952 3.144 14.856C3.048 14.759 3 14.641 3 14.5C3 14.359 3.048 14.241 3.144 14.144C3.241 14.048 3.359 14 3.5 14C3.691 14 3.875 13.965 4.052 13.895C4.245 13.818 4.414 13.707 4.561 13.561C4.707 13.414 4.818 13.245 4.895 13.052C4.965 12.875 5 12.691 5 12.5L5 3.5C5 3.309 4.965 3.125 4.895 2.948C4.818 2.755 4.707 2.586 4.561 2.439C4.414 2.293 4.245 2.182 4.052 2.105C3.875 2.035 3.691 2 3.5 2C3.359 2 3.241 1.952 3.144 1.856C3.048 1.759 3 1.641 3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1C3.818 1 4.125 1.059 4.42 1.176C4.741 1.303 5.024 1.488 5.268 1.732C5.352 1.817 5.43 1.906 5.5 1.999C5.57 1.906 5.648 1.817 5.732 1.732C5.976 1.488 6.259 1.303 6.58 1.176C6.875 1.059 7.182 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5C8 1.641 7.952 1.759 7.856 1.856C7.759 1.952 7.641 2 7.5 2C7.309 2 7.125 2.035 6.948 2.105C6.755 2.182 6.586 2.293 6.439 2.439C6.293 2.586 6.182 2.755 6.105 2.948C6.035 3.125 6 3.309 6 3.5L6 12.5C6 12.691 6.035 12.875 6.105 13.052ZM2.073 4.073C2.024 4.122 2 4.181 2 4.25L2 11.75C2 11.819 2.024 11.878 2.073 11.927C2.122 11.976 2.181 12 2.25 12L2.5 12C2.641 12 2.759 12.048 2.856 12.144C2.952 12.241 3 12.359 3 12.5C3 12.641 2.952 12.759 2.856 12.856C2.759 12.952 2.641 13 2.5 13L2.25 13C2.091 13 1.938 12.971 1.79 12.912C1.629 12.849 1.488 12.756 1.366 12.634C1.244 12.512 1.151 12.371 1.088 12.21C1.029 12.062 1 11.909 1 11.75L1 4.25C1 4.091 1.029 3.938 1.088 3.79C1.151 3.629 1.244 3.488 1.366 3.366C1.488 3.244 1.629 3.151 1.79 3.088C1.938 3.029 2.091 3 2.25 3L2.5 3C2.641 3 2.759 3.048 2.856 3.144C2.952 3.241 3 3.359 3 3.5C3 3.641 2.952 3.759 2.856 3.856C2.759 3.952 2.641 4 2.5 4L2.25 4C2.181 4 2.122 4.024 2.073 4.073ZM14.86 11.736C14.758 11.993 14.609 12.219 14.414 12.414C14.219 12.609 13.993 12.758 13.736 12.86C13.5 12.953 13.254 13 13 13L8.5 13C8.359 13 8.241 12.952 8.144 12.856C8.048 12.759 8 12.641 8 12.5C8 12.359 8.048 12.241 8.144 12.144C8.241 12.048 8.359 12 8.5 12L13 12C13.276 12 13.512 11.902 13.707 11.707C13.902 11.512 14 11.276 14 11L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L8.5 4C8.359 4 8.241 3.952 8.144 3.856C8.048 3.759 8 3.641 8 3.5C8 3.359 8.048 3.241 8.144 3.144C8.241 3.048 8.359 3 8.5 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 11C15 11.254 14.953 11.5 14.86 11.736Z"/></svg>

React

// Gentleface "input-text" (line-round), MIT. https://gentleface.com/icons/input-text
import type { SVGProps } from 'react';

export function InputTextIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M6.105 13.052C6.182 13.245 6.293 13.414 6.439 13.561C6.586 13.707 6.755 13.818 6.948 13.895C7.125 13.965 7.309 14 7.5 14C7.641 14 7.759 14.048 7.856 14.144C7.952 14.241 8 14.359 8 14.5C8 14.641 7.952 14.759 7.856 14.856C7.759 14.952 7.641 15 7.5 15C7.182 15 6.875 14.941 6.58 14.824C6.259 14.697 5.976 14.512 5.732 14.268C5.648 14.183 5.57 14.094 5.5 14.001C5.43 14.094 5.352 14.183 5.268 14.268C5.024 14.512 4.741 14.697 4.42 14.824C4.125 14.941 3.818 15 3.5 15C3.359 15 3.241 14.952 3.144 14.856C3.048 14.759 3 14.641 3 14.5C3 14.359 3.048 14.241 3.144 14.144C3.241 14.048 3.359 14 3.5 14C3.691 14 3.875 13.965 4.052 13.895C4.245 13.818 4.414 13.707 4.561 13.561C4.707 13.414 4.818 13.245 4.895 13.052C4.965 12.875 5 12.691 5 12.5L5 3.5C5 3.309 4.965 3.125 4.895 2.948C4.818 2.755 4.707 2.586 4.561 2.439C4.414 2.293 4.245 2.182 4.052 2.105C3.875 2.035 3.691 2 3.5 2C3.359 2 3.241 1.952 3.144 1.856C3.048 1.759 3 1.641 3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1C3.818 1 4.125 1.059 4.42 1.176C4.741 1.303 5.024 1.488 5.268 1.732C5.352 1.817 5.43 1.906 5.5 1.999C5.57 1.906 5.648 1.817 5.732 1.732C5.976 1.488 6.259 1.303 6.58 1.176C6.875 1.059 7.182 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5C8 1.641 7.952 1.759 7.856 1.856C7.759 1.952 7.641 2 7.5 2C7.309 2 7.125 2.035 6.948 2.105C6.755 2.182 6.586 2.293 6.439 2.439C6.293 2.586 6.182 2.755 6.105 2.948C6.035 3.125 6 3.309 6 3.5L6 12.5C6 12.691 6.035 12.875 6.105 13.052ZM2.073 4.073C2.024 4.122 2 4.181 2 4.25L2 11.75C2 11.819 2.024 11.878 2.073 11.927C2.122 11.976 2.181 12 2.25 12L2.5 12C2.641 12 2.759 12.048 2.856 12.144C2.952 12.241 3 12.359 3 12.5C3 12.641 2.952 12.759 2.856 12.856C2.759 12.952 2.641 13 2.5 13L2.25 13C2.091 13 1.938 12.971 1.79 12.912C1.629 12.849 1.488 12.756 1.366 12.634C1.244 12.512 1.151 12.371 1.088 12.21C1.029 12.062 1 11.909 1 11.75L1 4.25C1 4.091 1.029 3.938 1.088 3.79C1.151 3.629 1.244 3.488 1.366 3.366C1.488 3.244 1.629 3.151 1.79 3.088C1.938 3.029 2.091 3 2.25 3L2.5 3C2.641 3 2.759 3.048 2.856 3.144C2.952 3.241 3 3.359 3 3.5C3 3.641 2.952 3.759 2.856 3.856C2.759 3.952 2.641 4 2.5 4L2.25 4C2.181 4 2.122 4.024 2.073 4.073ZM14.86 11.736C14.758 11.993 14.609 12.219 14.414 12.414C14.219 12.609 13.993 12.758 13.736 12.86C13.5 12.953 13.254 13 13 13L8.5 13C8.359 13 8.241 12.952 8.144 12.856C8.048 12.759 8 12.641 8 12.5C8 12.359 8.048 12.241 8.144 12.144C8.241 12.048 8.359 12 8.5 12L13 12C13.276 12 13.512 11.902 13.707 11.707C13.902 11.512 14 11.276 14 11L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L8.5 4C8.359 4 8.241 3.952 8.144 3.856C8.048 3.759 8 3.641 8 3.5C8 3.359 8.048 3.241 8.144 3.144C8.241 3.048 8.359 3 8.5 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 11C15 11.254 14.953 11.5 14.86 11.736Z" />
    </svg>
  );
}

Vue

Vue: see /icons/input-text.md

Svelte

Svelte: see /icons/input-text.md

HTML img

HTML img: see /icons/input-text.md

CSS

CSS: see /icons/input-text.md

Data URL

Data URL: see /icons/input-text.md

Sprite

Sprite: see /icons/input-text.md

SwiftUI

SwiftUI: see /icons/input-text.md

Compose

Compose: see /icons/input-text.md

Android XML

Android XML: see /icons/input-text.md

Flutter

Flutter: see /icons/input-text.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

text field, text input, input field, textbox

Alternatives

input-textarea: a multi-line field (textarea)
input-search: a search field (search-field)
cursor-text: the text cursor itself (text-cursor)

Also fits

text cursor: a text field (text-field)
form: a single text field (text-field)
textarea: a single-line field (text-field)

Tags

input, field, text-field, textbox, form, type, cursor, caret

Category

Layout & interface

Component name

InputTextIcon

History

2026-10-15 added

Family 3

input-password input-search input-text-sparkle

More layout & interface icons

apps browser cards checkbox checkbox-indeterminate checkbox-off columns columns-gear cursor cursor-text cursor-user drag-drop grid grip-horizontal grip-vertical hand · all layout & interface icons

For agents

Metadata: /icons/input-text.json · Markdown: /icons/input-text.md · SVG: https://gentleface.com/svg/{style}/16/input-text.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/input-text.png

input-text icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp