Gentleface › Actions › search-replace

search-replace icon

Search replace: find and replace, replace, find replace, search and replace. 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="M10.144 1.144C10.241 1.048 10.359 1 10.5 1C10.641 1 10.759 1.048 10.856 1.144C10.952 1.241 11 1.359 11 1.5L11 3.5C11 3.641 10.952 3.759 10.856 3.856C10.759 3.952 10.641 4 10.5 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 3L9.329 3C9.276 2.957 9.222 2.916 9.167 2.876C8.794 2.601 8.388 2.389 7.949 2.24C7.51 2.09 7.059 2.011 6.595 2.001C6.153 1.992 5.719 2.046 5.292 2.165C4.866 2.284 4.466 2.461 4.092 2.698C3.701 2.946 3.356 3.248 3.057 3.602C2.759 3.957 2.521 4.348 2.343 4.777C2.174 5.185 2.067 5.61 2.023 6.05C2.009 6.187 1.948 6.3 1.841 6.387C1.735 6.475 1.612 6.511 1.475 6.497C1.335 6.483 1.222 6.424 1.136 6.318C1.049 6.213 1.013 6.09 1.028 5.95C1.082 5.412 1.212 4.893 1.419 4.394C1.636 3.87 1.927 3.392 2.292 2.958C2.657 2.525 3.079 2.156 3.557 1.853C4.014 1.564 4.503 1.347 5.024 1.202C5.545 1.057 6.076 0.99 6.617 1.001C7.183 1.013 7.734 1.11 8.271 1.293C8.807 1.475 9.304 1.734 9.76 2.07C9.842 2.131 9.922 2.193 10 2.257L10 1.5C10 1.359 10.048 1.241 10.144 1.144ZM15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L10.02 10.727C9.838 10.878 9.645 11.018 9.443 11.147C8.986 11.436 8.497 11.653 7.976 11.798C7.455 11.943 6.924 12.01 6.383 11.999C5.817 11.987 5.266 11.89 4.729 11.707C4.193 11.525 3.696 11.266 3.24 10.93C3.158 10.869 3.078 10.807 3 10.743L3 11.5C3 11.641 2.952 11.759 2.856 11.856C2.759 11.952 2.641 12 2.5 12C2.359 12 2.241 11.952 2.144 11.856C2.048 11.759 2 11.641 2 11.5L2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L4.5 9C4.641 9 4.759 9.048 4.856 9.144C4.952 9.241 5 9.359 5 9.5C5 9.641 4.952 9.759 4.856 9.856C4.759 9.952 4.641 10 4.5 10L3.671 10C3.724 10.043 3.778 10.084 3.833 10.124C4.206 10.399 4.612 10.611 5.051 10.76C5.49 10.91 5.941 10.989 6.405 10.999C6.847 11.008 7.281 10.954 7.708 10.835C8.134 10.716 8.534 10.539 8.908 10.302C9.299 10.054 9.644 9.752 9.943 9.398C10.241 9.043 10.479 8.652 10.657 8.223C10.826 7.815 10.933 7.39 10.977 6.95C10.991 6.813 11.052 6.7 11.159 6.613C11.265 6.525 11.388 6.489 11.525 6.503C11.662 6.516 11.775 6.577 11.862 6.684C11.949 6.79 11.986 6.913 11.972 7.05C11.918 7.588 11.788 8.107 11.581 8.606C11.367 9.121 11.083 9.592 10.727 10.019L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5Z"/></svg>

React

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

export function SearchReplaceIcon(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="M10.144 1.144C10.241 1.048 10.359 1 10.5 1C10.641 1 10.759 1.048 10.856 1.144C10.952 1.241 11 1.359 11 1.5L11 3.5C11 3.641 10.952 3.759 10.856 3.856C10.759 3.952 10.641 4 10.5 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 3L9.329 3C9.276 2.957 9.222 2.916 9.167 2.876C8.794 2.601 8.388 2.389 7.949 2.24C7.51 2.09 7.059 2.011 6.595 2.001C6.153 1.992 5.719 2.046 5.292 2.165C4.866 2.284 4.466 2.461 4.092 2.698C3.701 2.946 3.356 3.248 3.057 3.602C2.759 3.957 2.521 4.348 2.343 4.777C2.174 5.185 2.067 5.61 2.023 6.05C2.009 6.187 1.948 6.3 1.841 6.387C1.735 6.475 1.612 6.511 1.475 6.497C1.335 6.483 1.222 6.424 1.136 6.318C1.049 6.213 1.013 6.09 1.028 5.95C1.082 5.412 1.212 4.893 1.419 4.394C1.636 3.87 1.927 3.392 2.292 2.958C2.657 2.525 3.079 2.156 3.557 1.853C4.014 1.564 4.503 1.347 5.024 1.202C5.545 1.057 6.076 0.99 6.617 1.001C7.183 1.013 7.734 1.11 8.271 1.293C8.807 1.475 9.304 1.734 9.76 2.07C9.842 2.131 9.922 2.193 10 2.257L10 1.5C10 1.359 10.048 1.241 10.144 1.144ZM15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L10.02 10.727C9.838 10.878 9.645 11.018 9.443 11.147C8.986 11.436 8.497 11.653 7.976 11.798C7.455 11.943 6.924 12.01 6.383 11.999C5.817 11.987 5.266 11.89 4.729 11.707C4.193 11.525 3.696 11.266 3.24 10.93C3.158 10.869 3.078 10.807 3 10.743L3 11.5C3 11.641 2.952 11.759 2.856 11.856C2.759 11.952 2.641 12 2.5 12C2.359 12 2.241 11.952 2.144 11.856C2.048 11.759 2 11.641 2 11.5L2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L4.5 9C4.641 9 4.759 9.048 4.856 9.144C4.952 9.241 5 9.359 5 9.5C5 9.641 4.952 9.759 4.856 9.856C4.759 9.952 4.641 10 4.5 10L3.671 10C3.724 10.043 3.778 10.084 3.833 10.124C4.206 10.399 4.612 10.611 5.051 10.76C5.49 10.91 5.941 10.989 6.405 10.999C6.847 11.008 7.281 10.954 7.708 10.835C8.134 10.716 8.534 10.539 8.908 10.302C9.299 10.054 9.644 9.752 9.943 9.398C10.241 9.043 10.479 8.652 10.657 8.223C10.826 7.815 10.933 7.39 10.977 6.95C10.991 6.813 11.052 6.7 11.159 6.613C11.265 6.525 11.388 6.489 11.525 6.503C11.662 6.516 11.775 6.577 11.862 6.684C11.949 6.79 11.986 6.913 11.972 7.05C11.918 7.588 11.788 8.107 11.581 8.606C11.367 9.121 11.083 9.592 10.727 10.019L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5Z" />
    </svg>
  );
}

Vue

Vue: see /icons/search-replace.md

Svelte

Svelte: see /icons/search-replace.md

HTML img

HTML img: see /icons/search-replace.md

CSS

CSS: see /icons/search-replace.md

Data URL

Data URL: see /icons/search-replace.md

Sprite

Sprite: see /icons/search-replace.md

SwiftUI

SwiftUI: see /icons/search-replace.md

Compose

Compose: see /icons/search-replace.md

Android XML

Android XML: see /icons/search-replace.md

Flutter

Flutter: see /icons/search-replace.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.

With npm: import { SearchReplaceIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

find and replace, replace, find replace, search and replace

Alternatives

replace: replace the current match inside an open find widget

Tags

search, find, replace, find-and-replace, substitute, swap, magnifier, lens, search-and-replace, text, edit

Category

Actions

Component name

SearchReplaceIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 9

search search-clock search-gear search-off search-sparkle search-star search-x zoom-in zoom-out

More actions icons

arrow-down-1-9 arrow-down-a-z arrow-down-clock arrow-down-z-a arrow-up-clock ban bolt bolt-off check check-double clipboard clipboard-alert clipboard-check clipboard-clock clipboard-list clipboard-off · all actions icons

For agents

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

search-replace icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp