Icon Search Field

<div class='sf'><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg><input type='search' placeholder='Search components...' aria-label='Search'></div>

.sf{position:relative;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif}.sf svg{position:absolute;left:14px;top:12px;color:#8a8a8a;transition:color .15s}.sf input{width:100%;box-sizing:border-box;height:40px;padding:0 14px 0 40px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}.sf input::placeholder{color:#a3a3a3}.sf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.sf:focus-within svg{color:#111}