This snippet can be used to add a background image to a text field, which is particularly useful for search fields.

Code

input[type="search"] {
  padding-left: var(--form-input-search-padding-left, 2.5rem) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-4.35-4.35M17.5 11a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z'/%3E%3C/svg%3E");
  background-position: left .75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}