Icon inside input

Bootstrap 5 Icon inside input component

Responsive Icon inside input built with Bootstrap 5. Different usage of the icons inside the inputs and forms.

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

@
@example.com
https://example.com/users/
$ .00
@
With textarea
Edit in sandbox 
        
            
          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input 
              type="text"
              class="form-control"
              placeholder="Username"
              aria-label="Username"
              aria-describedby="basic-addon1"
            />
          </div>

          <div class="input-group mb-3">
            <input 
              type="text"
              class="form-control"
              placeholder="Recipient's username"
              aria-label="Recipient's username"
              aria-describedby="basic-addon2"
            />
            <span class="input-group-text" id="basic-addon2">@example.com</span>
          </div>

          <label for="basic-url" class="form-label">Your vanity URL</label>

          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
            <input 
              type="text"
              class="form-control"
              id="basic-url1"
              aria-describedby="basic-addon3"
            />
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text">$</span>
            <input 
              type="text"
              class="form-control"
              aria-label="Amount (to the nearest dollar)"
            />
            <span class="input-group-text">.00</span>
          </div>

          <div class="input-group mb-3">
            <input
              type="text"
              class="form-control"
              placeholder="Username"
              aria-label="Username"
            />
            <span class="input-group-text">@</span>
            <input 
              type="text"
              class="form-control"
              placeholder="Server"
              aria-label="Server"
            />
          </div>

          <div class="input-group">
            <span class="input-group-text">With textarea</span>
            <textarea class="form-control" aria-label="With textarea"></textarea>
          </div>