indrajithbandara / searchbox

:mag: Searchbox wizard that output all the markup and styles for your search input field.

SEARCHBOX

Just a searchbox generator

use the generator

http://shipow.github.io/searchbox/

use the mixin in your project

https://github.com/Shipow/searchbox/blob/master/scss/_searchbox.scss

html

<form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-custom">
  <div role="search" class="sbx-custom__wrapper">
    <input type="search" name="search" placeholder="Search your website" autocomplete="off" required="required" class="sbx-custom__input">
    <button type="submit" title="Submit your search query." class="sbx-custom__submit">
      <svg role="img" aria-label="Search">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-18"></use>
      </svg>
    </button>
    <button type="reset" title="Clear the search query." class="sbx-custom__reset">
      <svg role="img" aria-label="Reset">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-5"></use>
      </svg>
    </button>
  </div>
</form>

scss

@import 'searchbox';

$custom:(
	input-width: 300px,
	input-height: 50px,
	border-width: 2px,
	border-radius: 25px,
	input-border-color: #ccc,
	input-focus-border-color: #FF2E83,
	input-background: white,
	input-focus-background: white,
	font-size: 14px,
	placeholder-color: #bbb,
	icon: sbx-icon-search-18,
	icon-size: 30px,
	icon-position: left,
	icon-color: #FF2E83,
	icon-background: #FFFFFF,
	icon-background-opacity: 0,
	icon-clear: sbx-icon-clear-5,
	icon-clear-size: 18px
);

.sbx-custom{
  @include searchbox($custom...);
}

js (optionnal)

// focus input after reset
document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
  this.parentNode.querySelector('input').focus();
});

With Instantsearch.js

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search',
    placeholder: 'Search for product, brands, SKU, ...',
    wrapInput: false
  })
);

Icons

Clear

Search

    <svg xmlns="http://www.w3.org/2000/svg">

      <symbol id="sbx-icon-clear-1" viewBox="0 0 20 20">
        <path d="M9.408 10L.296.888 0 .592.592 0l.296.296L10 9.408 19.112.296 19.408 0 20 .592l-.296.296L10.592 10l9.112 9.112.296.296-.592.592-.296-.296L10 10.592.888 19.704.592 20 0 19.408l.296-.296L9.408 10z" fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-clear-2" viewBox="0 0 20 20">
        <path d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z" fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-clear-3" viewBox="0 0 20 20">
        <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-clear-4" viewBox="0 0 20 20">
        <path d="M11.664 9.877l4.485 4.485-1.542 1.54-4.485-4.485-4.485 4.485-1.54-1.54 4.485-4.485-4.485-4.485 1.54-1.54 4.485 4.484 4.485-4.485 1.54 1.542-4.484 4.485zM10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10z" fill-rule="evenodd"
        />
      </symbol>
      
      <symbol id="sbx-icon-clear-5" viewBox="0 0 20 20">
        <path d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10zm1.35-10.123l3.567 3.568-1.225 1.226-3.57-3.568-3.567 3.57-1.226-1.227 3.568-3.568-3.57-3.57 1.227-1.224 3.568 3.568 3.57-3.567 1.224 1.225-3.568 3.57zM10 18.272c4.568 0 8.272-3.704 8.272-8.272S14.568 1.728 10 1.728 1.728 5.432 1.728 10 5.432 18.272 10 18.272z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-1" viewBox="0 0 40 40">
        <path d="M27.6 29.15c-1.99 1.643-4.543 2.63-7.326 2.63-6.355 0-11.507-5.15-11.507-11.506 0-6.355 5.152-11.507 11.507-11.507 6.355 0 11.507 5.152 11.507 11.507 0 2.783-.987 5.335-2.63 7.325l7.392 7.392c.43.43.436 1.124.005 1.555-.428.428-1.122.428-1.555-.005L27.6 29.15zm-7.326.44c5.145 0 9.315-4.17 9.315-9.316 0-5.145-4.17-9.315-9.316-9.315-5.145 0-9.315 4.17-9.315 9.314 0 5.145 4.17 9.315 9.314 9.315zm16.813.81C38.982 27.292 40 23.72 40 20 40 8.954 31.046 0 20 0S0 8.954 0 20s8.954 20 20 20c3.76 0 7.37-1.04 10.5-2.974.514-.32.674-.994.355-1.51-.318-.514-.993-.673-1.508-.355C26.56 36.884 23.35 37.81 20 37.81c-9.835 0-17.808-7.973-17.808-17.808S10.165 2.192 20 2.192 37.808 10.165 37.808 20c0 3.314-.905 6.492-2.593 9.26-.315.515-.15 1.19.365 1.505.517.315 1.19.152 1.507-.365z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-10" viewBox="0 0 40 40">
        <path d="M15.643 31.285c8.64 0 15.642-7.003 15.642-15.642C31.285 7.003 24.282 0 15.643 0 7.003 0 0 7.003 0 15.643s7.003 15.642 15.643 15.642zm0-3.91c6.48 0 11.732-5.253 11.732-11.732 0-6.48-5.253-11.732-11.732-11.732-6.48 0-11.732 5.253-11.732 11.733s5.253 11.732 11.733 11.732zm12.605 4.192c-.914-.915-.92-2.393.004-3.315.916-.917 2.402-.917 3.315-.004l7.75 7.75c.913.914.918 2.392-.004 3.315-.917.916-2.403.916-3.316.003l-7.75-7.75zm-9.92-25.05c-5.26-1.213-10.51 2.067-11.725 7.328-.146.63.248 1.26.88 1.407.63.146 1.26-.248 1.406-.88.923-3.998 4.912-6.49 8.91-5.568.632.146 1.262-.247 1.408-.88.145-.63-.248-1.26-.88-1.406z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-11" viewBox="0 0 40 40">
        <path d="M15.553 31.106c8.59 0 15.553-6.963 15.553-15.553S24.143 0 15.553 0 0 6.963 0 15.553s6.963 15.553 15.553 15.553zm0-3.888c6.443 0 11.665-5.222 11.665-11.665 0-6.442-5.222-11.665-11.665-11.665-6.442 0-11.665 5.223-11.665 11.665 0 6.443 5.223 11.665 11.665 11.665zM27.76 31.06c-.78-.78-.778-2.05.004-2.833l.463-.463c.783-.783 2.057-.78 2.834-.003l8.168 8.17c.782.78.78 2.05-.003 2.832l-.463.463c-.783.783-2.057.78-2.833.003l-8.17-8.167z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-12" viewBox="0 0 40 41">
        <path d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-13" viewBox="0 0 40 40">
        <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-14" viewBox="0 0 40 40">
        <path d="M24.19 28.6c-2.464 1.634-5.42 2.584-8.598 2.584C6.982 31.184 0 24.204 0 15.592 0 6.982 6.98 0 15.592 0c8.61 0 15.592 6.98 15.592 15.592 0 3.178-.95 6.134-2.583 8.6l10.24 10.24c1.175 1.173 1.18 3.07 0 4.252l-.156.155c-1.175 1.174-3.08 1.175-4.253 0L24.19 28.6zm-8.598 1.025c7.75 0 14.033-6.283 14.033-14.033 0-7.75-6.283-14.033-14.033-14.033C7.842 1.56 1.56 7.84 1.56 15.59S7.84 29.625 15.59 29.625zm10.646-1.182c-.39-.39-.39-1.023.003-1.417l.786-.785c.392-.39 1.028-.39 1.417-.002l9.612 9.612c.39.39.39 1.022-.003 1.416l-.786.786c-.392.392-1.028.39-1.416.003l-9.612-9.612zM15.592 3.898c-6.458 0-11.694 5.236-11.694 11.694 0 .43.35.78.78.78.43 0 .78-.35.78-.78 0-5.597 4.537-10.135 10.134-10.135.43 0 .78-.35.78-.78 0-.43-.35-.78-.78-.78z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-15" viewBox="0 0 40 40">
        <path d="M24.034 29.906c-2.356 1.363-5.092 2.143-8.01 2.143C7.174 32.05 0 24.873 0 16.023S7.174 0 16.024 0c8.85 0 16.025 7.174 16.025 16.024 0 2.918-.78 5.654-2.144 8.01l8.96 8.962c1.175 1.174 1.184 3.07.008 4.246l-1.632 1.632c-1.17 1.17-3.067 1.173-4.247-.007l-8.96-8.96zm-8.01.54c7.965 0 14.422-6.457 14.422-14.422 0-7.965-6.457-14.422-14.422-14.422-7.965 0-14.422 6.457-14.422 14.422 0 7.965 6.457 14.422 14.422 14.422zm9.55-1.24l3.63-3.632 8.956 8.955c.392.392.4 1.02.01 1.41l-2.23 2.23c-.387.387-1.022.38-1.41-.01l-8.956-8.955zm-9.55-25.2c-.663 0-1.32.054-1.965.16-.438.072-.733.484-.662.92.072.437.484.733.92.66.56-.09 1.13-.137 1.706-.137.443 0 .8-.36.8-.803 0-.442-.357-.8-.8-.8zm-5.457 1.308c-3.993 2.038-6.56 6.146-6.56 10.71 0 .443.358.802.8.802.443 0 .8-.36.8-.802 0-3.956 2.227-7.516 5.69-9.283.393-.2.55-.683.348-1.077-.2-.394-.684-.55-1.078-.35z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-16" viewBox="0 0 40 40">
        <path d="M24.44 30.41c-2.396 1.387-5.178 2.18-8.145 2.18C7.295 32.59 0 25.294 0 16.295 0 7.295 7.296 0 16.295 0c9 0 16.295 7.295 16.295 16.295 0 2.967-.793 5.75-2.18 8.145l8.29 8.29c1.65 1.648 1.646 4.325 0 5.97-1.648 1.65-4.317 1.654-5.97 0l-8.29-8.29zm-8.145.55c8.1 0 14.666-6.566 14.666-14.665 0-8.1-6.565-14.666-14.665-14.666-8.1 0-14.665 6.565-14.665 14.665 0 8.1 6.566 14.665 14.665 14.665zm0-4.888c5.4 0 9.777-4.377 9.777-9.777 0-5.4-4.377-9.777-9.777-9.777-5.4 0-9.777 4.377-9.777 9.777 0 5.4 4.377 9.777 9.777 9.777zm0-1.63c4.5 0 8.148-3.647 8.148-8.147s-3.648-8.148-8.148-8.148-8.147 3.648-8.147 8.148 3.647 8.147 8.147 8.147zm9.723 5.268l3.693-3.692 7.986 7.985c1.02 1.02 1.02 2.678.003 3.696-1.02 1.02-2.67 1.023-3.697-.005l-7.985-7.985z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-17" viewBox="0 0 40 40">
        <path d="M35.567 31.158L28.6 24.192c1.634-2.465 2.584-5.42 2.584-8.6C31.184 6.983 24.204 0 15.592 0 6.982 0 0 6.98 0 15.593c0 8.61 6.98 15.592 15.592 15.592 3.178 0 6.134-.95 8.6-2.583l10.24 10.24c1.173 1.175 3.077 1.174 4.252 0l.155-.156c1.18-1.182 1.175-3.08 0-4.254l-2.17-2.172-1.102-1.104v.002zm-1.103 1.102l-6.022-6.02c-.388-.39-1.024-.39-1.416.002l-.785.785c-.393.394-.393 1.027-.003 1.417l6.022 6.02 2.204-2.204zm1.103 1.103l2.488 2.488c.39.392.39 1.024-.003 1.418l-.785.785c-.393.392-1.028.392-1.417.004l-2.488-2.49 2.205-2.204zm-19.975-3.737c7.75 0 14.033-6.283 14.033-14.033 0-7.75-6.283-14.034-14.033-14.034C7.842 1.56 1.56 7.84 1.56 15.592c0 7.75 6.282 14.033 14.032 14.033zm0-25.728c-.645 0-1.284.053-1.912.156-.425.07-.713.47-.643.896.07.425.47.712.896.642.545-.09 1.1-.135 1.66-.135.43 0 .78-.35.78-.78 0-.43-.35-.78-.78-.78zm-5.31 1.273c-3.885 1.984-6.384 5.98-6.384 10.423 0 .43.35.78.78.78.43 0 .78-.35.78-.78 0-3.85 2.165-7.314 5.533-9.034.385-.196.537-.666.34-1.05-.195-.383-.664-.535-1.048-.34z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-18" viewBox="0 0 40 40">
        <path d="M30.776 27.146l-1.32-1.32-3.63 3.632 1.32 1.32 3.63-3.632zm1.368 1.368l6.035 6.035c.39.39.4 1.017.008 1.408l-2.23 2.23c-.387.387-1.015.387-1.41-.008l-6.035-6.035 3.63-3.63zm-8.11 1.392c-2.356 1.363-5.092 2.143-8.01 2.143C7.174 32.05 0 24.873 0 16.023S7.174 0 16.024 0c8.85 0 16.025 7.174 16.025 16.024 0 2.918-.78 5.654-2.144 8.01l8.96 8.962c1.175 1.174 1.184 3.07.008 4.246l-1.632 1.632c-1.17 1.17-3.067 1.173-4.247-.007l-8.96-8.96zm-8.01.54c7.965 0 14.422-6.457 14.422-14.422 0-7.965-6.457-14.422-14.422-14.422-7.965 0-14.422 6.457-14.422 14.422 0 7.965 6.457 14.422 14.422 14.422zm0-2.403c6.638 0 12.018-5.38 12.018-12.02 0-6.636-5.38-12.017-12.018-12.017-6.637 0-12.018 5.38-12.018 12.018 0 6.638 5.38 12.02 12.018 12.02zm0-1.402c5.863 0 10.616-4.752 10.616-10.616 0-5.863-4.753-10.616-10.616-10.616-5.863 0-10.616 4.753-10.616 10.616 0 5.864 4.753 10.617 10.616 10.617z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-19" viewBox="0 0 40 40">
        <path d="M36.19 32.8l-4.568-4.567c-.78-.78-2.052-.782-2.835.002l-.555.555c-.78.78-.785 2.053-.003 2.836l4.567 4.567L36.19 32.8zm.643.643l1.022 1.022c.783.783.78 2.055-.002 2.836l-.555.556c-.784.784-2.057.782-2.836.002l-1.022-1.022 3.393-3.393zm-12.978-6.41c-2.484 1.835-5.556 2.918-8.88 2.918C6.704 29.95 0 23.247 0 14.977S6.704 0 14.974 0s14.974 6.705 14.974 14.976c0 3.325-1.083 6.397-2.916 8.882l2.512 2.512c1.196-.202 2.468.158 3.394 1.085l5.557 5.556c1.516 1.517 1.513 3.977 0 5.49-1.514 1.514-3.967 1.518-5.487-.002L27.45 32.94c-.922-.922-1.282-2.195-1.08-3.39l-2.515-2.516zm.606-2.484c-2.435 2.413-5.786 3.904-9.486 3.904-7.443 0-13.477-6.035-13.477-13.478 0-7.444 6.034-13.478 13.477-13.478 7.443 0 13.477 6.034 13.477 13.478 0 3.7-1.49 7.052-3.904 9.488l-.085.085zm.85 1.844l1.07-1.07 1.29 1.29c.298.298.302.777.004 1.075-.295.295-.774.295-1.074-.005l-1.29-1.29zm-10.336-.187c6.203 0 11.23-5.028 11.23-11.23 0-6.204-5.027-11.233-11.23-11.233-6.202 0-11.23 5.03-11.23 11.232 0 6.203 5.028 11.23 11.23 11.23zm0-1.31c5.48 0 9.92-4.442 9.92-9.92 0-5.48-4.44-9.923-9.92-9.923-5.48 0-9.92 4.442-9.92 9.922s4.44 9.92 9.92 9.92z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-2" viewBox="0 0 43 43">
        <path d="M26.69 28.904c-2.597 2.11-5.907 3.373-9.512 3.373-8.34 0-15.1-6.76-15.1-15.1C2.08 8.84 8.84 2.08 17.18 2.08s15.1 6.76 15.1 15.098c0 3.88-1.465 7.42-3.87 10.093l11.15 11.152c.462.462.465 1.208 0 1.674-.464.463-1.22.456-1.675 0L26.69 28.905zm-.258 2.536c-2.663 1.732-5.84 2.738-9.254 2.738-9.39 0-17-7.612-17-17 0-9.39 7.61-17 17-17 9.388 0 17 7.61 17 17 0 3.69-1.177 7.108-3.176 9.895l10.14 10.14c1.23 1.23 1.226 3.232-.005 4.463-1.234 1.234-3.232 1.237-4.464.005l-10.24-10.24zm-9.254-1.576c7.006 0 12.686-5.68 12.686-12.686 0-7.007-5.68-12.686-12.686-12.686-7.007 0-12.686 5.68-12.686 12.686s5.68 12.686 12.686 12.686zm0-1.18c-6.355 0-11.506-5.152-11.506-11.506 0-6.355 5.15-11.506 11.506-11.506 6.354 0 11.505 5.15 11.505 11.506 0 6.354-5.15 11.505-11.505 11.505z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-20" viewBox="0 0 40 40">
        <path d="M22.97 24.036c-1.37 1.133-3.13 1.813-5.045 1.813-4.377 0-7.925-3.55-7.925-7.925C10 13.548 13.548 10 17.925 10c4.376 0 7.924 3.548 7.924 7.925 0 1.916-.68 3.674-1.814 5.044l5.097 5.096c.294.294.295.77 0 1.066-.296.294-.774.294-1.067 0l-5.097-5.096zM20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20zm0-2c9.94 0 18-8.06 18-18S29.94 2 20 2 2 10.06 2 20s8.06 18 18 18zm-2.075-13.66c3.542 0 6.415-2.873 6.415-6.415 0-3.543-2.873-6.416-6.415-6.416-3.543 0-6.416 2.872-6.416 6.415 0 3.542 2.872 6.415 6.415 6.415z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-21" viewBox="0 0 41 40">
        <path d="M27.737 26.49l.017.015 12.15 12.15c.305.305.305.8-.005 1.11-.308.307-.81.303-1.11.004L26.668 27.645c-2.83 2.78-6.68 4.487-10.918 4.487C7.052 32.133 0 24.94 0 16.066 0 7.193 7.052 0 15.75 0c8.7 0 15.75 7.193 15.75 16.066 0 3.978-1.416 7.617-3.763 10.423zM15.75 30.525c7.83 0 14.175-6.474 14.175-14.46 0-7.985-6.346-14.46-14.175-14.46-7.83 0-14.175 6.475-14.175 14.46 0 7.986 6.346 14.46 14.175 14.46zm0-26.51c-6.524 0-11.812 5.395-11.812 12.05 0 .444.352.804.787.804.435 0 .788-.36.788-.804 0-5.767 4.583-10.443 10.237-10.443.435 0 .788-.36.788-.803 0-.444-.353-.803-.788-.803z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-22" viewBox="0 0 40 40">
        <path d="M24.382 25.485c-1.704 1.413-3.898 2.263-6.292 2.263-5.42 0-9.814-4.36-9.814-9.736 0-5.377 4.394-9.736 9.814-9.736s9.815 4.36 9.815 9.736c0 2.126-.687 4.093-1.853 5.694l5.672 5.627-1.73 1.718-5.612-5.565zM20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20zm-1.91-14.686c4.065 0 7.36-3.27 7.36-7.302 0-4.033-3.295-7.302-7.36-7.302s-7.36 3.27-7.36 7.302c0 4.033 3.295 7.302 7.36 7.302z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-23" viewBox="0 0 40 40">
        <path d="M21.728 22.597c-2.308 2.1-5.374 3.38-8.74 3.38C5.815 25.977 0 20.162 0 12.987 0 5.816 5.815 0 12.988 0c7.174 0 12.99 5.815 12.99 12.988 0 3.366-1.28 6.433-3.38 8.74 1.943-1.516 4.76-1.376 6.542.404l9.41 9.41c1.934 1.934 1.928 5.074-.003 7.005-1.935 1.935-5.077 1.93-7.004.004l-9.41-9.41c-1.787-1.786-1.918-4.602-.405-6.543zm-8.74-.235c5.177 0 9.374-4.197 9.374-9.374 0-5.176-4.197-9.373-9.374-9.373-5.176 0-9.373 4.197-9.373 9.373 0 5.177 4.197 9.374 9.373 9.374zm11.687 4.975c-.732-.733-.735-1.917.005-2.657.735-.735 1.93-.732 2.657-.005l9.104 9.104c.733.73.736 1.916-.004 2.656-.735.735-1.93.73-2.657.005l-9.105-9.103z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-3" viewBox="0 0 40 41">
        <path d="M26.51 28.573c-2.803 2.34-6.412 3.748-10.35 3.748C7.236 32.32 0 25.087 0 16.16 0 7.236 7.235 0 16.16 0c8.926 0 16.16 7.235 16.16 16.16 0 4.213-1.61 8.048-4.25 10.925L40 39.015l-1.524 1.524L26.51 28.572zm-10.35 2.132c8.033 0 14.545-6.512 14.545-14.544S24.193 1.617 16.16 1.617 1.617 8.128 1.617 16.16c0 8.033 6.512 14.545 14.545 14.545z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-4" viewBox="0 0 40 41">
        <path d="M25.54 28.188c-2.686 2.115-6.075 3.376-9.758 3.376C7.066 31.564 0 24.498 0 15.782 0 7.066 7.066 0 15.782 0c8.716 0 15.782 7.066 15.782 15.782 0 4.22-1.656 8.052-4.353 10.884l1.752 1.75 1.06-1.06L40 37.332l-3.72 3.72-9.977-9.976 1.062-1.062-1.826-1.826zm-9.758.746c7.264 0 13.152-5.888 13.152-13.152 0-7.263-5.888-13.152-13.152-13.152C8.52 2.63 2.63 8.52 2.63 15.782c0 7.264 5.89 13.152 13.152 13.152z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-5" viewBox="0 0 40 41">
        <path d="M25.098 27.967c-2.63 2.023-5.925 3.227-9.5 3.227C6.982 31.194 0 24.21 0 15.597S6.983 0 15.597 0s15.597 6.983 15.597 15.597c0 4.106-1.587 7.842-4.18 10.627l1.343 1.344.025-.025c.78-.778 2.043-.775 2.822.004l7.814 7.813c.78.78.78 2.047.004 2.823l-1.88 1.878c-.777.78-2.042.777-2.82-.002l-7.815-7.814c-.78-.78-.78-2.046-.003-2.822l.024-.025-1.43-1.43zm-9.5.627c7.177 0 12.996-5.82 12.996-12.997 0-7.178-5.82-12.998-12.997-12.998C8.42 2.6 2.6 8.42 2.6 15.596c0 7.178 5.82 12.997 12.997 12.997z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-6" viewBox="0 0 40 40">
        <path d="M28.295 32.517c-2.93 2.086-6.51 3.312-10.38 3.312C8.02 35.83 0 27.81 0 17.914 0 8.02 8.02 0 17.915 0 27.81 0 35.83 8.02 35.83 17.915c0 3.87-1.227 7.45-3.313 10.38l6.61 6.61c1.166 1.165 1.163 3.057 0 4.22-1.167 1.167-3.057 1.167-4.226-.002l-6.605-6.606zm-10.38.326c8.245 0 14.928-6.683 14.928-14.928 0-8.245-6.683-14.93-14.928-14.93-8.245 0-14.93 6.685-14.93 14.93 0 8.245 6.685 14.928 14.93 14.928zm0-26.573c-6.43 0-11.645 5.214-11.645 11.645 0 .494.4.895.896.895.495 0 .896-.4.896-.895 0-5.442 4.41-9.853 9.853-9.853.494 0 .895-.4.895-.896 0-.495-.4-.896-.895-.896z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-7" viewBox="0 0 40 42">
        <path d="M16.85 33.702c9.307 0 16.852-7.545 16.852-16.85C33.702 7.543 26.157 0 16.852 0 7.543 0 0 7.544 0 16.85c0 9.307 7.544 16.852 16.85 16.852zm0-2.81c7.756 0 14.043-6.286 14.043-14.04 0-7.757-6.287-14.044-14.042-14.044S2.81 9.095 2.81 16.85c0 7.756 6.287 14.043 14.043 14.043zm11.235 2.288l3.97-3.972L40 37.152l-3.972 3.97-7.943-7.942z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-8" viewBox="0 0 40 40">
        <path d="M16 32c8.835 0 16-7.165 16-16 0-8.837-7.165-16-16-16C7.162 0 0 7.163 0 16c0 8.835 7.163 16 16 16zm0-5.76c5.654 0 10.24-4.586 10.24-10.24 0-5.656-4.586-10.24-10.24-10.24-5.656 0-10.24 4.584-10.24 10.24 0 5.654 4.584 10.24 10.24 10.24zM28.156 32.8c-1.282-1.282-1.278-3.363.002-4.643 1.282-1.284 3.365-1.28 4.642-.003l6.238 6.238c1.282 1.282 1.278 3.363-.002 4.643-1.283 1.283-3.366 1.28-4.643.002l-6.238-6.238z"
        fill-rule="evenodd" />
      </symbol>
      
      <symbol id="sbx-icon-search-9" viewBox="0 0 40 41">
        <path d="M25.25 32.2c-2.417 1.307-5.184 2.05-8.126 2.05C7.667 34.25 0 26.58 0 17.123 0 7.667 7.667 0 17.124 0 26.582 0 34.25 7.667 34.25 17.124c0 3.277-.92 6.338-2.517 8.94.29.18.563.397.814.65l6.105 6.103c1.8 1.8 1.795 4.722 0 6.52-1.8 1.8-4.72 1.798-6.52 0l-6.104-6.105c-.314-.313-.572-.66-.777-1.03zm-8.126-4.116c6.053 0 10.96-4.907 10.96-10.96 0-6.052-4.907-10.96-10.96-10.96-6.052 0-10.96 4.908-10.96 10.96 0 6.053 4.908 10.96 10.96 10.96z"
        fill-rule="evenodd" />
      </symbol>
    </svg>

run the generator

• npm install
• gulp dev