Search Input with Icon

<div class="search-input-wrap">

  <svg class="search-icon"
       viewBox="0 0 24 24"
       aria-hidden="true">

    <circle cx="11" cy="11" r="7"></circle>
    <path d="M16.5 16.5L21 21"></path>

  </svg>

  <input
    type="search"
    placeholder="Search components..."
    aria-label="Search components"
  >

</div>

.search-input-wrap{
  position:relative;
  width:100%;
  max-width:420px;
}

.search-input-wrap input{
  width:100%;
  padding:15px 16px 15px 48px;

  border:1px solid #263750;
  border-radius:10px;
  outline:none;

  background:#0b1423;
  color:#ffffff;

  font-size:16px;

  transition:.25s ease;
}

.search-input-wrap input::placeholder{
  color:#65748b;
}

.search-input-wrap input:focus{
  border-color:#22d3ee;

  box-shadow:
    0 0 0 3px rgba(34,211,238,.10);
}

.search-icon{
  position:absolute;
  z-index:2;

  left:16px;
  top:50%;

  width:20px;
  height:20px;

  transform:translateY(-50%);

  fill:none;
  stroke:#65748b;
  stroke-width:2;
  stroke-linecap:round;

  pointer-events:none;

  transition:.25s ease;
}

.search-input-wrap:focus-within .search-icon{
  stroke:#22d3ee;
}

How This Search Input with Icon Works

This Search Input with Icon combines a native HTML search field with an inline SVG magnifying-glass icon. The component uses CSS to position the icon inside the input area and changes both the field border and icon color when the search field receives focus. No JavaScript is included.

The HTML uses a .search-input-wrap container with two elements inside it: an SVG icon and an <input type="search">. Using type="search" identifies the field as a search control rather than a generic text input. The placeholder reads “Search components…” and the aria-label provides the accessible name “Search components.”

The search icon is built directly with SVG markup. A <circle> creates the main lens using cx="11", cy="11", and r="7", while a path from 16.5 16.5 to 21 21 forms the handle. Because the icon is inline SVG, no external image or icon library is required.

The .search-input-wrap uses position: relative, which establishes the positioning reference for the absolutely positioned icon. Its width is 100% with a max-width of 420px, allowing the component to adapt to narrower containers without growing beyond the intended maximum size.

The input also uses width: 100%. Its padding is 15px 16px 15px 48px, with considerably more space on the left than on the other sides. That 48px left padding creates room for the magnifying-glass icon so typed text and placeholder content do not overlap it.

Visually, the field uses a 1px #263750 border, 10px rounded corners, and a dark #0b1423 background. Entered text appears in white at 16px, while the placeholder uses the more muted #65748b color.

When the input receives focus, its border changes to cyan #22d3ee. CSS also adds a three-pixel cyan-tinted focus ring using box-shadow: 0 0 0 3px rgba(34,211,238,.10). A .25s ease transition makes the border and shadow changes gradual rather than immediate.

The .search-icon is positioned 16px from the left edge and at top: 50%. transform: translateY(-50%) moves it upward by half of its own height, keeping the 20 × 20px SVG vertically centered within the search field.

By default, the icon uses a #65748b stroke. The wrapper’s :focus-within state changes that stroke to cyan when the input is focused. This allows the parent wrapper to react to focus on its child element. For more information about this selector, see the MDN :focus-within documentation.

The SVG also has pointer-events: none. As a result, the decorative icon does not intercept pointer interaction intended for the search control beneath it.

This component only provides the search input interface. There is no JavaScript for filtering content, submitting a search request, reading the query, or displaying results. Those behaviors would need to be connected separately.

Customizing the Search Input with Icon

The existing HTML and CSS make it straightforward to adapt the search control to different layouts and visual styles.

• Change max-width: 420px to control the maximum width of the search field.
• Adjust padding: 15px 16px 15px 48px to change the field height or space reserved for the icon.
• Change the 10px border radius to make the search field more square or rounded.
• Replace #0b1423 to customize the field background.
• Change #22d3ee to use another focus border, focus ring, and active icon color.
• Edit the icon’s 20 × 20px dimensions or left: 16px position to adjust its size and placement.
• Modify the .25s ease transitions to make the focus changes faster or slower.
• Replace “Search components…” and its aria-label with wording appropriate for the content being searched.

Where to Use This Search Input with Icon

This component works well wherever users need a recognizable search field that can later be connected to application-specific search logic.

• Component libraries
• Documentation websites
• Blog and article searches
• Product catalogs
• Dashboard search bars
• Help centers and knowledge bases
• Filterable lists

For interfaces where users choose a predefined category rather than entering a free-form search query, the Custom Radio Buttons component provides a related form-control approach. This search field itself does not filter or submit anything, so the actual search behavior must be implemented separately.

Frequently Asked Questions

Does this Search Input with Icon perform an actual search?

No. The retrieved component contains no JavaScript or search-processing logic. It only provides the styled search input interface.

How is the search icon placed inside the field?

The wrapper uses position: relative, while the SVG uses position: absolute, left: 16px, and top: 50%. A vertical translation centers the icon, and the input’s 48px left padding reserves space for it.

Why does the icon turn cyan when the input is focused?

The selector .search-input-wrap:focus-within .search-icon applies when the child input receives focus. It changes the SVG stroke from #65748b to #22d3ee.

Does this component require an external icon library?

No. The magnifying glass is created with an inline SVG containing a circle and path, so no external icon package or image file is required.

This Search Input with Icon keeps the structure lightweight by combining a native search field, inline SVG, and CSS focus states while leaving actual search and filtering behavior to the surrounding application.