Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
    <h3>20px</h3>

    <div class="container">
        <svg class="icon-style"><use href="#close"></use></svg>
        <svg class="icon-style"><use href="#arrow-down"></svg>
        <svg class="icon-style"><use href="#arrow-up"></use></svg>
        <svg class="icon-style"><use href="#arrow-right"></use></svg>
        <svg class="icon-style"><use href="#arrow-left"></use></svg>
        <svg class="icon-style"><use href="#search"></use></svg>
        <svg class="icon-style"><use href="#more-info"></use></svg>
        <svg class="icon-style"><use href="#checked"></use></svg>
        <svg class="icon-style color-dark"><use href="#envelop"></use></svg>
        <svg class="icon-style color-dark"><use href="#feedback"></use></svg>
        <svg class="icon-style"><use href="#applay"></use></svg>
        <svg class="icon-style color-dark"><use href="#info"></use></svg> 
    </div>
    <h3>24px</h3>
    <div class="container">
        <svg class="icon-style medium-icon"><use href="#game-overlay"></use></svg>
        <svg class="icon-style medium-icon"><use href="#settings"></use></svg>
        <svg class="icon-style medium-icon"><use href="#video"></use></svg>
        <svg class="icon-style medium-icon"><use href="#keybord"></use></svg>
        <svg class="icon-style medium-icon"><use href="#sound"></use></svg>
        <svg class="icon-style medium-icon"><use href="#support"></use></svg>
        <svg class="icon-style medium-icon"><use href="#language"></use></svg>
        <svg class="icon-style medium-icon"><use href="#privacy"></use></svg>
        <svg class="icon-style medium-icon"><use href="#subscription"></use></svg>
        <svg class="icon-style medium-icon"><use href="#notification"></use></svg>
        <svg class="icon-style medium-icon"><use href="#play"></use></svg>
        <svg class="icon-style medium-icon"><use href="#user"></use></svg>
        <svg class="icon-style medium-icon"><use href="#edit"></use></svg>
        <svg class="icon-style medium-icon color-dark"><use href="#squere-info"></use></svg>
        <svg class="icon-style medium-icon color-dark"><use href="#bug"></use></svg>
        <svg class="icon-style medium-icon color-dark"><use href="#log"></use></svg>
        <svg class="icon-style medium-icon color-dark"><use href="#development"></use></svg>
        <svg class="icon-style medium-icon color-dark"><use href="#discord"></use></svg>
        <svg class="icon-style medium-icon color-dark"><use href="#warning"></use></svg>
        <svg class="icon-style medium-icon color-dark"><use href="#no-image"></use></svg>
        <svg class="icon-style medium-icon"><use href="#sort-up"></use></svg>
        <svg class="icon-style medium-icon"><use href="#fps"></use></svg>
        <svg class="icon-style medium-icon"><use href="#ping"></use></svg>
        <svg class="icon-style medium-icon"><use href="#trash"></use></svg>
        <svg class="icon-style medium-icon"><use href="#success"></use></svg>
        <svg class="icon-style medium-icon"><use href="#like"></use></svg>
        <svg class="icon-style medium-icon"><use href="#dislike"></use></svg>
     </div>

     <h3>30px</h3>
     <h4>Window control</h4>
     <div class="container">
        <svg class="icon-style large-icon"><use href="#window-close"></use></svg>
        <svg class="icon-style large-icon"><use href="#window-minimize"></use></svg>
        <svg class="icon-style large-icon"><use href="#window-home"></use></svg>
        <svg class="icon-style large-icon"><use href="#window-back"></use></svg>
        <svg class="icon-style large-icon"><use href="#window-settings"></use></svg>
     </div>

     <h3>32px</h3>
     <div class="container">
        <svg class="icon-style big-icon"><use href="#menu-close"></use></svg>
        <svg class="icon-style big-icon"><use href="#menu-hamburger"></use></svg>
        <svg class="icon-style big-icon"><use href="#plus"></use></svg>
        <svg class="icon-style big-icon"><use href="#edit-round"></use></svg>
        <svg class="icon-style big-icon"><use href="#resize-up"></use></svg>
        <svg class="icon-style big-icon"><use href="#resize-down"></use></svg>
     </div>

     <h4>Social Icons</h4>
     <div class="container">
        <svg class="icon-style big-icon"><use href="#social-facebook"></use></svg>
        <svg class="icon-style big-icon"><use href="#social-twitter"></use></svg>
        <svg class="icon-style big-icon"><use href="#social-youtube"></use></svg>
        <svg class="icon-style big-icon"><use href="#social-instagram"></use></svg>
        <svg class="icon-style big-icon"><use href="#social-discord"></use></svg>
        <svg class="icon-style big-icon"><use href="#social-email"></use></svg>
        <svg class="icon-style big-icon"><use href="#social-linkdin"></use></svg>
     </div>

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

         <!-- general icons  20px-->

        <symbol id="close" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z"/>
                
        </symbol>

        <symbol id="arrow-down" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4097 13.7926C10.0387 14.078 9.51934 14.0679 9.15977 13.7682L4.35977 9.76822C3.93549 9.41466 3.87817 8.78409 4.23173 8.35982C4.58529 7.93554 5.21586 7.87821 5.64014 8.23178L9.82496 11.7191L14.3902 8.20738C14.828 7.87064 15.4558 7.95254 15.7926 8.39029C16.1293 8.82804 16.0474 9.45589 15.6097 9.79262L10.4097 13.7926Z"/>                
        </symbol>

        <symbol id="arrow-up" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59034 7.20738C9.96134 6.92199 10.4807 6.93213 10.8402 7.23178L15.6402 11.2318C16.0645 11.5853 16.1218 12.2159 15.7683 12.6402C15.4147 13.0645 14.7841 13.1218 14.3599 12.7682L10.175 9.28087L5.60976 12.7926C5.17201 13.1294 4.54416 13.0475 4.20742 12.6097C3.87069 12.172 3.95258 11.5441 4.39034 11.2074L9.59034 7.20738Z" />
        </symbol>
        
        <symbol id="arrow-right" viewBox="0 0 20 20">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7926 9.59034C13.078 9.96134 13.0679 10.4807 12.7682 10.8402L8.76822 15.6402C8.41465 16.0645 7.78409 16.1218 7.35981 15.7683C6.93554 15.4147 6.87821 14.7841 7.23178 14.3599L10.7191 10.175L7.20738 5.60976C6.87064 5.172 6.95254 4.54416 7.39029 4.20742C7.82804 3.87069 8.45589 3.95258 8.79262 4.39034L12.7926 9.59034Z" />
        </symbol>

        <symbol id="arrow-left" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.20738 10.4097C6.92199 10.0387 6.93213 9.51934 7.23178 9.15977L11.2318 4.35977C11.5853 3.93549 12.2159 3.87817 12.6402 4.23173C13.0645 4.58529 13.1218 5.21586 12.7682 5.64014L9.28087 9.82496L12.7926 14.3902C13.1294 14.828 13.0475 15.4558 12.6097 15.7926C12.172 16.1293 11.5441 16.0474 11.2074 15.6097L7.20738 10.4097Z" />
        </symbol>

        <symbol id="search" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4764 12.8908C10.4956 13.5892 9.29579 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.29587 13.5892 10.4958 12.8907 11.4766L16.707 15.2929C17.0975 15.6834 17.0975 16.3166 16.707 16.7071C16.3164 17.0976 15.6833 17.0976 15.2927 16.7071L11.4764 12.8908ZM12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z" />                
        </symbol>

        <symbol id="more-info" viewBox="0 0 20 20">
            <path d="M9.21525 11.9592V11.6327C9.21525 11.161 9.28399 10.774 9.42148 10.4717C9.55897 10.1653 9.81485 9.8428 10.1891 9.50417C10.7085 9.04058 11.035 8.69188 11.1687 8.45807C11.3062 8.22426 11.3749 7.94207 11.3749 7.61151C11.3749 7.20032 11.2489 6.88387 10.9968 6.66215C10.7486 6.4364 10.3896 6.32352 9.91987 6.32352C9.61816 6.32352 9.32409 6.36182 9.03766 6.43842C8.75123 6.51098 8.42279 6.64602 8.05234 6.84355L7.71436 6.02723C8.43616 5.62814 9.19043 5.42859 9.97716 5.42859C10.7066 5.42859 11.2737 5.61806 11.6786 5.99699C12.0834 6.37593 12.2858 6.91007 12.2858 7.59941C12.2858 7.89369 12.2476 8.15371 12.1712 8.37946C12.0986 8.60118 11.9898 8.81282 11.8447 9.01438C11.6996 9.21191 11.3864 9.53239 10.9052 9.97583C10.5195 10.3225 10.2636 10.6108 10.1376 10.8405C10.0153 11.0703 9.95424 11.3767 9.95424 11.7597V11.9592H9.21525Z" />
            <path d="M8.93455 13.7551C8.93455 13.2069 9.16369 12.9327 9.62198 12.9327C9.84349 12.9327 10.0134 13.0033 10.1318 13.1444C10.254 13.2855 10.3151 13.4891 10.3151 13.7551C10.3151 14.0131 10.254 14.2147 10.1318 14.3598C10.0096 14.5009 9.83967 14.5714 9.62198 14.5714C9.42339 14.5714 9.25917 14.509 9.12932 14.384C8.99947 14.255 8.93455 14.0454 8.93455 13.7551Z" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" />
        </symbol>

        <symbol id="checked" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 5.20006C16.0418 5.53143 16.1314 6.15823 15.8 6.60006L9.8 14.6001C9.62607 14.832 9.36005 14.977 9.07089 14.9975C8.78173 15.0181 8.49788 14.9122 8.29289 14.7072L5.29289 11.7072C4.90237 11.3166 4.90237 10.6835 5.29289 10.293C5.68342 9.90243 6.31658 9.90243 6.70711 10.293L8.89181 12.4777L14.2 5.40006C14.5314 4.95823 15.1582 4.86869 15.6 5.20006Z" />
        </symbol>

        <symbol id="envelop" viewBox="0 0 20 20">
            <path d="M1 6.67599L8.67119 13.4948C9.42896 14.1684 10.5709 14.1684 11.3286 13.4948L19 6.67583V15C19 15.5523 18.5523 16 18 16H2C1.44772 16 1 15.5523 1 15V6.67599Z" />
            <path d="M1.3103 4.2759L9.99991 12L18.6896 4.27582C18.5102 4.10492 18.2674 4 18 4H2C1.73261 4 1.48973 4.10495 1.3103 4.2759Z" />
        </symbol>

        <symbol id="feedback" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 2C1.44772 2 1 2.44772 1 3V15C1 15.5523 1.44772 16 2 16H15.1111L18.1655 18.749C18.4873 19.0386 19 18.8102 19 18.3773V3C19 2.44772 18.5523 2 18 2H2ZM9.90542 4.27546C9.93633 4.18543 10.0637 4.18543 10.0946 4.27546L11.1572 7.37017C11.171 7.41057 11.209 7.43769 11.2517 7.43769H14.678C14.7762 7.43769 14.8156 7.56446 14.7347 7.6201L11.9724 9.51927C11.9354 9.54471 11.9199 9.59168 11.9345 9.63415L12.9918 12.7135C13.0231 12.8047 12.92 12.883 12.8406 12.8284L10.0567 10.9143C10.0225 10.8909 9.97747 10.8909 9.94335 10.9143L7.15943 12.8284C7.08 12.883 6.97689 12.8047 7.0082 12.7135L8.0655 9.63415C8.08008 9.59168 8.06457 9.54471 8.02758 9.51927L5.2653 7.6201C5.18438 7.56446 5.22375 7.43769 5.32195 7.43769H8.74826C8.79098 7.43769 8.82897 7.41057 8.84284 7.37017L9.90542 4.27546Z" />
        </symbol>

        <symbol id="applay" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9982 14.0002C14.4459 14.0001 13.9983 13.5523 13.9984 13.0001L13.9994 7.41348L5.70717 15.7072C5.31668 16.0977 4.68351 16.0978 4.29295 15.7073C3.9024 15.3168 3.90234 14.6836 4.29283 14.2931L12.586 5.99854H7C6.44772 5.99854 6 5.55082 6 4.99854C6 4.44625 6.44771 3.99853 7 3.99854L14.9999 3.99854C15.2651 3.99853 15.5195 4.10392 15.7071 4.29149C15.8946 4.47907 15.9999 4.73347 15.9999 4.99872L15.9984 13.0004C15.9983 13.5527 15.5505 14.0003 14.9982 14.0002Z" />                
        </symbol>

        <symbol id="info" viewBox="0 0 20 20">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 5V7H9L9 5L11 5ZM11 9L11 15H9L9 9H11Z" />
        </symbol>

        <!-- 24px  -->
        <symbol id="game-overlay" viewBox="0 0 24 24">
            <path d="M18 9H13V13H18V9Z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 5C2 4.44772 2.44772 4 3 4H21C21.5523 4 22 4.44772 22 5V16C22 16.5523 21.5523 17 21 17H3C2.44772 17 2 16.5523 2 16V5ZM20 6H11V15H20V6Z" />
            <path d="M8 19C6.89543 19 6 19.8954 6 21H18C18 19.8954 17.1046 19 16 19H8Z"/>
        </symbol>

        <symbol id="settings" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.81056 2.75746C9.92185 2.3123 10.3218 2 10.7807 2H13.2191C13.678 2 14.078 2.3123 14.1893 2.75746L14.9076 5.63058C15.3144 5.8166 15.7003 6.04045 16.0608 6.29764L18.9099 5.48263C19.351 5.35643 19.8215 5.54668 20.0509 5.94407L21.2701 8.05583C21.4996 8.45322 21.4291 8.95576 21.0992 9.27473L18.9687 11.3347C18.9894 11.5537 18.9999 11.7756 18.9999 12C18.9999 12.2246 18.9894 12.4466 18.9687 12.6658L21.0985 14.7252C21.4284 15.0441 21.4989 15.5467 21.2694 15.9441L20.0502 18.0558C19.8208 18.4532 19.3503 18.6435 18.9092 18.5173L16.0607 17.7024C15.7002 17.9596 15.3144 18.1834 14.9076 18.3694L14.1893 21.2425C14.078 21.6877 13.678 22 13.2191 22H10.7807C10.3218 22 9.92185 21.6877 9.81056 21.2425L9.09228 18.3694C8.68548 18.1834 8.2996 17.9596 7.93914 17.7024L5.09069 18.5173C4.64952 18.6435 4.17907 18.4532 3.94963 18.0558L2.73041 15.9441C2.50098 15.5467 2.57144 15.0441 2.90132 14.7252L5.03117 12.6658C5.0105 12.4466 4.99992 12.2246 4.99992 12C4.99992 11.7756 5.01048 11.5537 5.03112 11.3347L2.90062 9.27473C2.57074 8.95576 2.50027 8.45322 2.72971 8.05583L3.94893 5.94407C4.17836 5.54668 4.64881 5.35643 5.08998 5.48263L7.93904 6.29764C8.29953 6.04045 8.68545 5.8166 9.09228 5.63058L9.81056 2.75746ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"/>
        </symbol>

        <symbol id="video" viewBox="0 0 24 24">
            <path d="M2 7C2 6.44772 2.44772 6 3 6H15C15.5523 6 16 6.44772 16 7V17C16 17.5523 15.5523 18 15 18H3C2.44772 18 2 17.5523 2 17V7Z"/>
            <path d="M18 14.5715L21.1746 17.2925C21.4989 17.5705 22 17.3401 22 16.9129V7.08712C22 6.65994 21.4989 6.42949 21.1746 6.70749L18 9.42862V14.5715Z"/>
        </symbol>

        <symbol id="keybord" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C2.44772 6 2 6.44772 2 7V18C2 18.5523 2.44772 19 3 19H21C21.5523 19 22 18.5523 22 18V7C22 6.44772 21.5523 6 21 6H3ZM7 8H5V10H7V8ZM9 8H11V10H9V8ZM15 8H13V10H15V8ZM17 8H19V10H17V8ZM7 11H5V13H7V11ZM9 11H11V13H9V11ZM15 11H13V13H15V11ZM17 11H19V13H17V11ZM17 15H7V17H17V15Z"/>
        </symbol>

        <symbol id="sound" viewBox="0 0 24 24">
            <path d="M13.2013 3.09985C13.5312 2.85433 14 3.0896 14 3.50062V20.4994C14 20.9104 13.5312 21.1457 13.2013 20.9002L6.61538 15.9977H3C2.44771 15.9977 2 15.5503 2 14.9983V9.00169C2 8.44971 2.44772 8.00225 3 8.00225H6.61538L13.2013 3.09985Z"/>
            <path d="M18 11.0006C17.4477 11.0006 17 11.448 17 12C17 12.552 17.4477 12.9994 18 12.9994H21C21.5523 12.9994 22 12.552 22 12C22 11.448 21.5523 11.0006 21 11.0006H18Z"/>
            <path d="M19.8942 6.55583C19.6472 6.06213 19.0465 5.86201 18.5526 6.10886L16.5526 7.1083C16.0586 7.35515 15.8584 7.95549 16.1054 8.44919C16.3523 8.94289 16.953 9.143 17.447 8.89615L19.447 7.89671C19.941 7.64986 20.1412 7.04953 19.8942 6.55583Z"/>
            <path d="M17.4474 15.1038C16.9535 14.8569 16.3528 15.0571 16.1058 15.5508C15.8588 16.0445 16.059 16.6448 16.553 16.8916L18.553 17.8911C19.047 18.1379 19.6477 17.9378 19.8946 17.4441C20.1416 16.9504 19.9414 16.3501 19.4474 16.1032L17.4474 15.1038Z"/>
        </symbol>

        <symbol id="support" viewBox="0 0 24 24">
                <path d="M10 4C9.44772 4 9 4.44772 9 5C9 5.55228 9.44772 6 10 6H14C14.5523 6 15 5.55228 15 5C15 4.44772 14.5523 4 14 4H10Z"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5 8C4.44772 8 4 8.44771 4 9V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V9C20 8.44772 19.5523 8 19 8H5ZM13 10H11V13H8V15H11V18H13V15H16V13H13V10Z"/>
        </symbol>

        <symbol id="language" viewBox="0 0 24 24">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM14.6175 19.562C17.4473 18.5826 19.5566 16.0596 19.9381 13H15.9802C15.8764 15.6148 15.3697 17.9333 14.6175 19.562ZM9.38254 4.43801C6.55268 5.41736 4.44342 7.9404 4.06189 11H8.01975C8.12359 8.38522 8.63032 6.06674 9.38254 4.43801ZM10.0214 13C10.1143 15.15 10.5009 17.0092 11.0285 18.3283C11.3347 19.0937 11.6492 19.5788 11.8961 19.8399C11.9365 19.8826 11.9711 19.9155 12 19.9407C12.0289 19.9155 12.0635 19.8826 12.1039 19.8399C12.3508 19.5788 12.6653 19.0937 12.9715 18.3283C13.4991 17.0092 13.8857 15.15 13.9786 13L10.0214 13ZM8.01975 13C8.12359 15.6148 8.63032 17.9333 9.38254 19.562C6.55268 18.5826 4.44342 16.0596 4.06189 13H8.01975ZM13.9786 11L10.0214 11C10.1143 8.85001 10.5009 6.99079 11.0285 5.67171C11.3347 4.90634 11.6492 4.42118 11.8961 4.16007C11.9365 4.11741 11.9711 4.08451 12 4.05929C12.0289 4.08451 12.0635 4.11741 12.1039 4.16007C12.3508 4.42118 12.6653 4.90634 12.9715 5.67171C13.4991 6.99079 13.8857 8.85001 13.9786 11ZM15.9803 11C15.8764 8.38522 15.3697 6.06674 14.6175 4.43801C17.4473 5.41736 19.5566 7.9404 19.9381 11H15.9803Z"/>
        </symbol>

        <symbol id="privacy" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2648 21.9507C12.0922 22.0164 11.9077 22.0164 11.7351 21.9507C10.9398 21.6481 8.51484 20.5287 6.68921 17.596C4.88613 14.6995 4.1021 9.13222 4.0006 6.22772C3.98229 5.70362 4.38273 5.27869 4.89516 5.24528C5.94451 5.17685 6.67731 5.11462 7.79982 4.68067C9.01726 4.21003 10.4327 3.03844 11.2704 2.28001C11.6827 1.90666 12.3173 1.90666 12.7297 2.28001C13.5673 3.03844 14.9827 4.21003 16.2002 4.68067C17.3227 5.11462 18.0555 5.17685 19.1048 5.24528C19.6173 5.27869 20.0177 5.70362 19.9994 6.22772C19.8979 9.13222 19.1139 14.6995 17.3108 17.596C15.4852 20.5287 13.0601 21.6481 12.2648 21.9507ZM12.0001 19.8452C12.8291 19.4452 14.3851 18.4834 15.6207 16.4985C16.3254 15.3666 16.9133 13.5424 17.333 11.4956C17.6469 9.96476 17.8422 8.43401 17.9377 7.20072C17.2038 7.1174 16.4479 6.96351 15.4912 6.59368C14.2152 6.10037 12.9006 5.10139 12.0001 4.33645L12.0001 19.8452Z"/>
        </symbol>

        <symbol id="subscription" viewBox="0 0 24 24">
            <path d="M5.20465 18.6659C5.26968 18.8647 5.4628 19 5.6813 19H18.3187C18.5372 19 18.7303 18.8647 18.7954 18.6659L21.9765 8.94604C22.1012 8.56499 21.7074 8.21591 21.3174 8.36176L16.04 10.3351C15.7932 10.4274 15.5138 10.3198 15.4035 10.0901L12.4506 3.93899C12.269 3.56083 11.7306 3.56084 11.5491 3.93901L8.59647 10.0901C8.48622 10.3198 8.20675 10.4274 7.95997 10.3351L2.68259 8.36176C2.29255 8.21591 1.89879 8.56499 2.0235 8.94604L5.20465 18.6659Z"/>
        </symbol>

        <symbol id="notification" viewBox="0 0 24 24">
            <path d="M14 5L13.9999 5.01904C15.3327 5.07131 16.2671 5.26703 17 6C17.9999 7 17.9999 9 17.9999 9L18 14C18 14 18.5 14.25 19.25 15C20 15.75 20 17 20 17H4C4 17 4 15.75 4.75 15C5.5 14.25 6 14 6 14V9C6 9 6 7 7 6C7.63347 5.36653 8.7184 5.13434 10.0006 5.04924C10.0002 5.03288 10 5.01646 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z"/>
            <path d="M9.16992 19H14.8284C14.4166 20.1652 13.3054 21 11.9991 21C10.6929 21 9.58172 20.1652 9.16992 19Z"/>
        </symbol>

        <symbol id="play" viewBox="0 0 24 24">
            <path d="M14 5L13.9999 5.01904C15.3327 5.07131 16.2671 5.26703 17 6C17.9999 7 17.9999 9 17.9999 9L18 14C18 14 18.5 14.25 19.25 15C20 15.75 20 17 20 17H4C4 17 4 15.75 4.75 15C5.5 14.25 6 14 6 14V9C6 9 6 7 7 6C7.63347 5.36653 8.7184 5.13434 10.0006 5.04924C10.0002 5.03288 10 5.01646 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z"/>
            <path d="M9.16992 19H14.8284C14.4166 20.1652 13.3054 21 11.9991 21C10.6929 21 9.58172 20.1652 9.16992 19Z"/>
        </symbol>

        <symbol id="user" viewBox="0 0 24 24">
            <path d="M9 8C11.2091 8 13 6.20914 13 4C13 1.79086 11.2091 0 9 0C6.79086 0 5 1.79086 5 4C5 6.20914 6.79086 8 9 8Z"/>
            <path d="M7 10C3.13401 10 0 13.134 0 17H18C18 13.134 14.866 10 11 10H7Z"/>
        </symbol>

        <symbol id="edit" viewBox="0 0 24 24">
            <path d="M7.82343 12.8187L10.972 16.0286L20.6901 6.49596C21.0844 6.10922 21.0905 5.47608 20.7038 5.08181L18.9557 3.29974C18.569 2.90547 17.9358 2.89937 17.5416 3.28611L7.82343 12.8187Z"/>
            <path d="M9.3677 17.6026L6.21912 14.3927L4.12565 18.2565C3.65652 19.1224 4.58951 20.0735 5.46423 19.6212L9.3677 17.6026Z"/>
        </symbol>

        <symbol id="squere-info" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3H4ZM11 8V6H13V8H11ZM8 12V10H13V16H16V18H8V16H11V12H8Z" />
        </symbol>

        <symbol id="bug" viewBox="0 0 24 24">
                <path d="M13 8L13 20.9169C14.693 20.6329 16.1455 19.6399 17.042 18.2537L19.4232 19.9375C19.8742 20.2564 20.4982 20.1493 20.8171 19.6984C21.136 19.2474 21.0289 18.6234 20.5779 18.3045L17.8428 16.3704C17.9456 15.9302 18 15.4714 18 14.9999V14H21C21.5523 14 22 13.5522 22 13C22 12.4477 21.5523 12 21 12H18V10.0787L20.5779 8.25581C21.0289 7.93694 21.136 7.3129 20.8171 6.86196C20.4982 6.41103 19.8742 6.30396 19.4232 6.62282L17.4757 7.99995L13 8Z" />
                <path d="M11 8L11 20.9169C9.30723 20.6329 7.8548 19.6401 6.95834 18.2542L4.57773 19.9375C4.1268 20.2564 3.50275 20.1493 3.18389 19.6984C2.86502 19.2474 2.97209 18.6234 3.42303 18.3045L6.15739 16.371C6.05444 15.9307 6 15.4716 6 14.9999V14H3C2.44772 14 2 13.5522 2 13C2 12.4477 2.44772 12 3 12H6V10.0778L3.42303 8.25556C2.97209 7.9367 2.86502 7.31266 3.18389 6.86172C3.50275 6.41079 4.1268 6.30372 4.57773 6.62258L6.52562 7.99995L11 8Z" />
                <path d="M15.874 6.00001H8.12601C8.57004 4.27478 10.1362 3 12 3C13.8638 3 15.43 4.27478 15.874 6.00001Z" />
        </symbol>

        <symbol id="log" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3V21C4 21.5523 4.44772 22 5 22H19C19.5523 22 20 21.5523 20 21V9H13V2H5ZM6 12H10V14H6V12ZM10 18H6V20H10V18ZM6 15H13V17H6V15ZM18 15H15V17H18V15ZM12 12H18V14H12V12ZM18 20V18H12V20H18Z" />
            <path d="M15 2.08982V7H19.9102C19.861 6.89201 19.7926 6.79261 19.7071 6.70711L15.2929 2.29289C15.2074 2.20739 15.108 2.13896 15 2.08982Z" />
        </symbol>

        <symbol id="development" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 5C2 4.44772 2.44772 4 3 4H21C21.5523 4 22 4.44772 22 5V16C22 16.5523 21.5523 17 21 17H3C2.44772 17 2 16.5523 2 16V5ZM7.29305 7.29282L3.58594 10.9999L7.29304 14.707L8.70726 13.2928L6.41436 10.9999L8.70725 8.70704L7.29305 7.29282ZM20.4141 10.9999L16.707 7.29282L15.2927 8.70704L17.5856 10.9999L15.2927 13.2928L16.707 14.707L20.4141 10.9999ZM14 6H12L10 15H12L14 6Z" />
            <path d="M6 21C6 19.8954 6.89543 19 8 19H16C17.1046 19 18 19.8954 18 21H6Z" />
        </symbol>

        <symbol id="discord" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6418 17.5415C16.156 18.2078 16.7729 18.982 16.7729 18.982C20.3619 18.8626 21.8427 16.5281 21.988 16.299C21.996 16.2863 22 16.2799 22 16.2808C22 10.5368 19.5321 5.87293 19.5321 5.87293C17.0814 3.94621 14.7334 4.00015 14.7334 4.00015L14.4936 4.28834C17.407 5.20669 18.7609 6.55716 18.7609 6.55716C16.9786 5.54881 15.2304 5.04456 13.6024 4.84652C12.3684 4.70243 11.186 4.73849 10.1406 4.88244C10.0508 4.88244 9.974 4.89624 9.88756 4.91174L9.84922 4.9185C9.24933 4.99061 7.79267 5.20669 5.95888 6.05292C5.32476 6.34104 4.94772 6.55716 4.94772 6.55716C4.94772 6.55716 6.35302 5.13457 9.43789 4.21622L9.26656 4.00015C9.26656 4.00015 6.93578 3.94621 4.46786 5.87293C4.46786 5.87293 2 10.5368 2 16.2808C2 16.2808 3.43958 18.874 7.22711 19C7.22711 19 7.86122 18.2078 8.37533 17.5234C6.19881 16.8392 5.37619 15.4166 5.37619 15.4166C5.37619 15.4166 5.54757 15.5427 5.85603 15.7227C5.86665 15.7227 5.87722 15.7297 5.89188 15.739C5.90089 15.745 5.91151 15.7518 5.9246 15.7587C5.9503 15.7768 5.97603 15.7903 6.00173 15.8038C6.02743 15.8172 6.05314 15.8307 6.07885 15.8487C6.50722 16.1008 6.93578 16.299 7.32989 16.4611C8.03256 16.7671 8.87233 17.0373 9.84922 17.2353C11.1346 17.4874 12.6427 17.5774 14.2879 17.2533C15.0934 17.0912 15.916 16.8571 16.7729 16.4791C17.3728 16.245 18.0411 15.9028 18.7438 15.4166C18.7438 15.4166 17.8869 16.8752 15.6418 17.5415ZM13.3107 12.2933C13.3107 11.237 14.0819 10.3887 15.0588 10.3887C16.0184 10.3887 16.8068 11.237 16.8068 12.2933C16.8068 13.3495 16.0356 14.1978 15.0588 14.1978C14.099 14.1978 13.3107 13.3495 13.3107 12.2933ZM7.05533 12.2933C7.05533 11.237 7.82656 10.3887 8.80333 10.3887C9.78022 10.3887 10.5686 11.237 10.5514 12.2933C10.5514 13.3495 9.78022 14.1978 8.80333 14.1978C7.84367 14.1978 7.05533 13.3495 7.05533 12.2933Z" />
        </symbol>

        <symbol id="warning" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8384 3.49213C12.4623 2.83596 11.5377 2.83596 11.1616 3.49213L3.13577 17.4956C2.75435 18.1611 3.22186 19 3.97412 19H20.0259C20.7781 19 21.2456 18.1611 20.8642 17.4956L12.8384 3.49213ZM11.0274 8.01901H12.9726V13.0104H11.0274V8.01901ZM12.9726 15.0069H11.0274V17.0035H12.9726V15.0069Z" />
        </symbol>

        <symbol id="no-image" viewBox="0 0 24 24">
            <path d="M3 12.9998V21H21V3H13.0003V12.9998H3Z" />
            <path d="M11.0001 3L11.0003 10.9998H3.0003L11.0001 3Z" />
        </symbol>

        <symbol id="sort-up" viewBox="0 0 24 24">
            <path d="M15.998 15L11.998 10L7.99805 15H15.998Z"/>
        </symbol>

        <symbol id="fps" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C6 4.44772 6.44772 4 7 4H21C21.5523 4 22 4.44772 22 5V15C22 15.5523 21.5523 16 21 16H7C6.44772 16 6 15.5523 6 15V5ZM9 5H7V7H9V5ZM9 9H7V11H9V9ZM9 13H7V15H9V13ZM21 5H19V7H21V5ZM21 9H19V11H21V9ZM21 13H19V15H21V13Z"/>
            <path d="M2 9C2 8.44772 2.44772 8 3 8H4V17C4 17.5523 4.44772 18 5 18H18V19C18 19.5523 17.5523 20 17 20H3C2.44772 20 2 19.5523 2 19V9Z"/>
        </symbol>

        <symbol id="ping" viewBox="0 0 24 24">
            <path d="M2 1C2 0.447715 2.44772 0 3 0C3.55228 0 4 0.447715 4 1V8H2V1Z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 10C0.447715 10 0 10.4477 0 11V17C0 17.5523 0.447716 18 1 18H19C19.5523 18 20 17.5523 20 17V11C20 10.4477 19.5523 10 19 10H1ZM2 13H10V15H2V13ZM12 13V15H14V13H12ZM16 13H18V15H16V13Z"/>
        </symbol>

        <symbol id="trash" viewBox="0 0 24 24">
            <path d="M9 3C9 2.44772 9.44772 2 10 2H14C14.5523 2 15 2.44772 15 3V4H18C18.5523 4 19 4.44772 19 5V6H5V5C5 4.44772 5.44772 4 6 4H9V3Z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18 8H6V21C6 21.5523 6.44772 22 7 22H17C17.5523 22 18 21.5523 18 21V8ZM11 11V19H9V11H11ZM15 11H13V19H15V11Z"/>
        </symbol>

        <symbol id="success" viewBox="0 0 24 24">
            <path d="M20 12C20 11.165 19.8721 10.3598 19.6347 9.60304L21.0261 7.68993C21.6504 8.99505 22 10.4567 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C13.7552 2 15.4048 2.45221 16.8387 3.24649L15.6509 4.87973C14.5563 4.31738 13.3152 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"/>
            <path d="M20.8087 4.58824C21.1336 4.14159 21.0348 3.51617 20.5882 3.19133C20.1415 2.8665 19.5161 2.96525 19.1913 3.4119L11.8904 13.4506L8.7179 10.1789C8.33343 9.78244 7.70034 9.7727 7.30385 10.1572C6.90737 10.5416 6.89763 11.1747 7.2821 11.5712L12.1096 16.5496L20.8087 4.58824Z"/>
        </symbol>

        <symbol id="like" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10 9.5C10 10.8807 9.32843 12 8.5 12C7.67157 12 7 10.8807 7 9.5C7 8.11929 7.67157 7 8.5 7C9.32843 7 10 8.11929 10 9.5ZM17 9.5C17 10.8807 16.3284 12 15.5 12C14.6716 12 14 10.8807 14 9.5C14 8.11929 14.6716 7 15.5 7C16.3284 7 17 8.11929 17 9.5ZM6.3418 15C7.16552 17.3303 9.38795 18.9998 12.0003 18.9998C14.6127 18.9998 16.8351 17.3303 17.6588 15H15.4651C14.7734 16.1955 13.4808 16.9998 12.0003 16.9998C10.5198 16.9998 9.2272 16.1955 8.53555 15H6.3418Z"/>
        </symbol>

        <symbol id="dislike" viewBox="0 0 24 24">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C9.74896 22 7.67126 21.2552 6 20C3.57111 18.1756 2 15.2716 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.5 12C9.32843 12 10 10.8807 10 9.5C10 8.11929 9.32843 7 8.5 7C7.67157 7 7 8.11929 7 9.5C7 10.8807 7.67157 12 8.5 12ZM15.5 12C16.3284 12 17 10.8807 17 9.5C17 8.11929 16.3284 7 15.5 7C14.6716 7 14 8.11929 14 9.5C14 10.8807 14.6716 12 15.5 12ZM12 14.0005C14.6124 14.0005 16.8349 15.6701 17.6586 18.0005H15.4649C14.7732 16.8049 13.4806 16.0005 12 16.0005C10.5194 16.0005 9.22675 16.8049 8.53513 18.0005H6.34141C7.16508 15.6701 9.38756 14.0005 12 14.0005Z"/>
        </symbol>

    
          <!-- window controls icons 30px -->
        <symbol id="window-close" viewBox="0 0 30 30">
            <path d="M15.5941 15.0254L19.6535 10.8629C19.8515 10.6599 19.8515 10.3553 19.6535 10.1523C19.4554 9.94924 19.1584 9.94924 18.9604 10.1523L14.901 14.3147L10.8416 10.1523C10.6436 9.94924 10.3465 9.94924 10.1485 10.1523C9.95049 10.3553 9.95049 10.6599 10.1485 10.8629L14.2079 15.0254L10.1485 19.1878C9.95049 19.3909 9.95049 19.6954 10.1485 19.8985C10.2475 20 10.3465 20 10.5446 20C10.7426 20 10.8416 20 10.9406 19.8985L15 15.736L19.0594 19.8985C19.1584 20 19.2574 20 19.4554 20C19.6535 20 19.7525 20 19.8515 19.8985C20.0495 19.6954 20.0495 19.3909 19.8515 19.1878L15.5941 15.0254Z"/>
        </symbol>

        <symbol id="window-minimize" viewBox="0 0 30 30">
            <path d="M20 19H10V20H20V19Z"/>
        </symbol>

        <symbol id="window-home" viewBox="0 0 30 30">
            <path d="M22.809 13.1L15.009 8L7.20902 13.1C7.00902 13.3 6.90902 13.6 7.10902 13.8C7.30902 14 7.60902 14.1 7.80902 13.9L10.009 12.4V21.4C10.009 21.7 10.209 21.9 10.509 21.9C10.809 21.9 11.009 21.7 11.009 21.4V11.7L15.009 9.1L19.009 11.7V21.4C19.009 21.7 19.209 21.9 19.509 21.9C19.809 21.9 20.009 21.7 20.009 21.4V12.4L22.209 13.9C22.309 14 22.409 14 22.509 14C22.709 14 22.809 13.9 22.909 13.8C23.109 13.5 23.009 13.2 22.809 13.1Z" />
        </symbol>

        <symbol id="window-back" viewBox="0 0 30 30">
            <path d="M20 15.0049H10.8L15.1 9.80846C15.3 9.60859 15.2 9.3088 15 9.10894C14.8 8.90908 14.5 9.00901 14.3 9.20887L9 15.5045L14.3 21.8001C14.4 21.9001 14.5 22 14.7 22C14.8 22 14.9 22 15 21.9001C15.2 21.7002 15.2 21.4004 15.1 21.2006L10.8 16.0042H20V15.0049Z"/>
        </symbol>

        <symbol id="window-settings" viewBox="0 0 30 30">
            <path d="M22 16.3V13.7H19.8C19.7 13.3 19.5 12.9 19.3 12.5L20.9 10.9L19 9.1L17.4 10.7C17 10.5 16.6 10.3 16.2 10.2V8H13.6V10.2C13.2 10.3 12.8 10.5 12.4 10.7L11 9.1L9.1 11L10.7 12.6C10.5 13 10.3 13.4 10.2 13.8H8V16.4H10.2C10.3 16.8 10.5 17.2 10.7 17.6L9.1 19L10.9 20.8L12.5 19.2C12.9 19.4 13.3 19.6 13.7 19.7V22H16.3V19.8C16.7 19.7 17.1 19.5 17.5 19.3L19.1 20.9L20.9 19.1L19.3 17.5C19.5 17.1 19.7 16.7 19.8 16.3H22ZM15 17.8C13.5 17.8 12.2 16.6 12.2 15C12.2 13.5 13.4 12.2 15 12.2C16.6 12.2 17.8 13.4 17.8 15C17.8 16.5 16.5 17.8 15 17.8Z"/>
        </symbol>
        

         <!-- 32px icons -->
         <symbol id="menu-close" viewBox="0 0 32 32">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2929 10.2929C10.6834 9.90237 11.3166 9.90237 11.7071 10.2929L16 14.5858L20.2929 10.2929C20.6834 9.90237 21.3166 9.90237 21.7071 10.2929C22.0976 10.6834 22.0976 11.3166 21.7071 11.7071L17.4142 16L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L16 17.4142L11.7071 21.7071C11.3166 22.0976 10.6834 22.0976 10.2929 21.7071C9.90237 21.3166 9.90237 20.6834 10.2929 20.2929L14.5858 16L10.2929 11.7071C9.90237 11.3166 9.90237 10.6834 10.2929 10.2929Z"/>
         </symbol>

         <symbol id="menu-hamburger" viewBox="0 0 32 32">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 22C8 21.4477 8.44772 21 9 21H23C23.5523 21 24 21.4477 24 22C24 22.5523 23.5523 23 23 23H9C8.44772 23 8 22.5523 8 22Z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 10C8 9.44772 8.44772 9 9 9H23C23.5523 9 24 9.44772 24 10C24 10.5523 23.5523 11 23 11H9C8.44772 11 8 10.5523 8 10Z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C8 15.4477 8.44772 15 9 15H23C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17H9C8.44772 17 8 16.5523 8 16Z"/>
         </symbol>

         <symbol id="plus" viewBox="0 0 32 32">
            <circle cx="16" cy="16" r="16" fill="#262626"/>
            <path d="M17 17V23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23V17H9C8.44772 17 8 16.5523 8 16C8 15.4477 8.44772 15 9 15H15V9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9V15H23C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17H17Z" fill="#808080"/>
         </symbol>

         <symbol id="link" viewBox="0 0 32 32">       
            <path d="M17 8C16.4477 8 16 8.44772 16 9C16 9.55228 16.4477 10 17 10H20.5858L15.2929 15.2929C14.9024 15.6834 14.9024 16.3166 15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071L22 11.4142V15C22 15.5523 22.4477 16 23 16C23.5523 16 24 15.5523 24 15V9C24 8.44772 23.5523 8 23 8H17Z" fill="#808080"/>
            <path d="M9 10C8.44772 10 8 10.4477 8 11V23C8 23.5523 8.44772 24 9 24H21C21.5523 24 22 23.5521 22 22.9998V19H20V22H10V12H13V10H9Z" fill="#808080"/>
        </symbol>

         <symbol id="edit-round" viewBox="0 0 32 32">
            <circle cx="16" cy="16" r="16" fill="#262626"/>
            <path d="M11.8234 16.8187L14.972 20.0286L24.6901 10.496C25.0844 10.1092 25.0905 9.47608 24.7038 9.08181L22.9557 7.29974C22.569 6.90547 21.9358 6.89937 21.5416 7.28611L11.8234 16.8187Z" fill="#808080"/>
            <path d="M13.3677 21.6026L10.2191 18.3927L8.12565 22.2565C7.65652 23.1224 8.58951 24.0735 9.46423 23.6212L13.3677 21.6026Z" fill="#808080"/>
         </symbol>

         <symbol id="resize-up" viewBox="0 0 32 32">
                <rect width="32" height="32" fill="#262626"/>
                <path d="M25 6H18C17.4477 6 17 6.44772 17 7C17 7.55229 17.4477 8 18 8L22.5858 8L8 22.5858L8 18C8 17.4477 7.55229 17 7 17C6.44772 17 6 17.4477 6 18V25C6 25.5523 6.44772 26 7 26H14C14.5523 26 15 25.5523 15 25C15 24.4477 14.5523 24 14 24H9.41421L24 9.41421V14C24 14.5523 24.4477 15 25 15C25.5523 15 26 14.5523 26 14V7C26 6.44772 25.5523 6 25 6Z" fill="#808080"/>
         </symbol>

         <symbol id="resize-down" viewBox="0 0 32 32">
            <rect width="32" height="32" fill="#262626"/>
            <path d="M18 15H25C25.5523 15 26 14.5523 26 14C26 13.4477 25.5523 13 25 13H20.4142L25.7071 7.70711C26.0976 7.31658 26.0976 6.68342 25.7071 6.29289C25.3166 5.90237 24.6834 5.90237 24.2929 6.29289L19 11.5858V7C19 6.44772 18.5523 6 18 6C17.4477 6 17 6.44772 17 7L17 14C17 14.2652 17.1054 14.5196 17.2929 14.7071C17.4804 14.8946 17.7348 15 18 15Z" fill="#808080"/>
            <path d="M7 17C6.44772 17 6 17.4477 6 18C6 18.5523 6.44772 19 7 19H11.5858L6.29289 24.2929C5.90237 24.6834 5.90237 25.3166 6.29289 25.7071C6.68342 26.0976 7.31658 26.0976 7.70711 25.7071L13 20.4142V25C13 25.5523 13.4477 26 14 26C14.5523 26 15 25.5523 15 25V18C15 17.4477 14.5523 17 14 17H7Z" fill="#808080"/>
         </symbol>

          <!-- social icons 32px icons -->
         <symbol id="social-facebook" viewBox="0 0 32 32">
            <path d="M24.8947 6H7.10526C6.81213 6 6.531 6.11645 6.32372 6.32372C6.11645 6.531 6 6.81213 6 7.10526V24.8947C6 25.1879 6.11645 25.469 6.32372 25.6763C6.531 25.8836 6.81213 26 7.10526 26H16.6842V18.2807H14.0702V15.2386H16.6702V13.0175C16.6702 10.4316 18.2456 9.02456 20.5509 9.02456C21.334 9.02689 22.1164 9.0714 22.8947 9.15789V11.8561H21.3018C20.0491 11.8561 19.807 12.4491 19.807 13.3228V15.2526H22.807L22.4175 18.2807H19.807V26H24.8947C25.1879 26 25.469 25.8836 25.6763 25.6763C25.8836 25.469 26 25.1879 26 24.8947V7.10526C26 6.81213 25.8836 6.531 25.6763 6.32372C25.469 6.11645 25.1879 6 24.8947 6V6Z" />
         </symbol>

         <symbol id="social-twitter" viewBox="0 0 32 32">
            <path d="M24 12C24 12.1176 24 12.3529 24 12.4706C24 17.7647 19.8824 24 12.3529 24C10 24 7.88235 23.2941 6 22.2353C6.35294 22.2353 6.70588 22.2353 6.94118 22.2353C8.82353 22.2353 10.5882 21.6471 12 20.4706C10.2353 20.4706 8.70588 19.2941 8.11765 17.6471C8.35294 17.6471 8.58824 17.7647 8.94118 17.7647C9.29412 17.7647 9.64706 17.7647 10 17.6471C8.11765 17.2941 6.70588 15.6471 6.70588 13.6471C7.29412 14 7.88235 14.1176 8.58824 14.1176C7.52941 13.4118 6.70588 12.1176 6.70588 10.7059C6.70588 10 6.94118 9.29412 7.29412 8.70588C9.29412 11.1765 12.3529 12.8235 15.7647 12.9412C15.6471 12.5882 15.6471 12.3529 15.6471 12C15.6471 9.76471 17.5294 8 19.7647 8C20.9412 8 22 8.47059 22.8235 9.29412C23.7647 9.05882 24.5882 8.82353 25.4118 8.35294C25.0588 9.29412 24.4706 10.1176 23.6471 10.5882C24.4706 10.4706 25.2941 10.2353 26 10C25.4118 10.7059 24.7059 11.4118 24 12Z" />
         </symbol>

         <symbol id="social-youtube" viewBox="0 0 32 32">
            <path d="M27.4545 9.63226C27.1273 8.53548 26.3636 7.76774 25.3818 7.43871C23.5273 7 16 7 16 7C16 7 8.47273 7 6.61818 7.54839C5.63636 7.87742 4.76364 8.64516 4.54545 9.74194C4 11.4968 4 15.4452 4 15.4452C4 15.4452 4 19.3935 4.54545 21.2581C4.87273 22.3548 5.63636 23.1226 6.61818 23.4516C8.47273 24 16 24 16 24C16 24 23.5273 24 25.3818 23.4516C26.3636 23.1226 27.2364 22.3548 27.4545 21.2581C28 19.5032 28 15.4452 28 15.4452C28 15.4452 28 11.4968 27.4545 9.63226ZM13.6 19.0645V11.9355L19.9273 15.5548L13.6 19.0645Z" />
         </symbol>

         <symbol id="social-instagram" viewBox="0 0 32 32">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9963 10.866C13.1629 10.866 10.8613 13.1641 10.8613 16.0019C10.8613 18.8398 13.159 21.1379 15.9963 21.1379C18.8336 21.1379 21.1312 18.8398 21.1312 16.0019C21.1312 13.1641 18.8336 10.866 15.9963 10.866ZM15.9963 19.3319C14.155 19.3319 12.6629 17.8396 12.6629 15.9979C12.6629 14.1563 14.155 12.664 15.9963 12.664C17.8375 12.664 19.3296 14.1563 19.3296 15.9979C19.3296 17.8396 17.8375 19.3319 15.9963 19.3319Z"/>
            <path d="M22.5318 10.6596C22.5318 11.3216 21.9953 11.8583 21.3334 11.8583C20.6715 11.8583 20.135 11.3216 20.135 10.6596C20.135 9.99764 20.6715 9.46098 21.3334 9.46098C21.9953 9.46098 22.5318 9.99764 22.5318 10.6596Z" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.996 6C13.2817 6 12.9405 6.01191 11.873 6.05954C10.8095 6.10716 10.0833 6.27783 9.44841 6.52391C8.78968 6.77793 8.23413 7.12324 7.67857 7.6789C7.12302 8.23457 6.78175 8.79421 6.52381 9.4491C6.27778 10.0841 6.10714 10.8105 6.05952 11.8782C6.0119 12.9419 6 13.2832 6 15.998C6 18.7128 6.0119 19.0542 6.05952 20.1218C6.10714 21.1856 6.27778 21.9119 6.52381 22.5509C6.77778 23.2098 7.12302 23.7654 7.67857 24.3211C8.23413 24.8768 8.79365 25.2181 9.44841 25.4761C10.0833 25.7222 10.8095 25.8928 11.877 25.9405C12.9444 25.9881 13.2817 26 16 26C18.7183 26 19.0556 25.9881 20.123 25.9405C21.1865 25.8928 21.9127 25.7222 22.5516 25.4761C23.2103 25.2221 23.7659 24.8768 24.3214 24.3211C24.877 23.7654 25.2183 23.2058 25.4762 22.5509C25.7222 21.9159 25.8929 21.1895 25.9405 20.1218C25.9881 19.0542 26 18.7168 26 15.998C26 13.2792 25.9881 12.9419 25.9405 11.8742C25.8929 10.8105 25.7222 10.0841 25.4762 9.44513C25.2222 8.78627 24.877 8.2306 24.3214 7.67494C23.7659 7.11927 23.2064 6.77793 22.5516 6.51994C21.9167 6.27386 21.1905 6.1032 20.123 6.05557C19.0516 6.01191 18.7103 6 15.996 6ZM15.996 7.80194C18.6667 7.80194 18.9802 7.81385 20.0357 7.86148C21.0119 7.90514 21.5397 8.06787 21.8929 8.20679C22.3611 8.38936 22.6944 8.60369 23.0436 8.95297C23.3929 9.30224 23.6111 9.63564 23.7897 10.104C23.9246 10.4572 24.0913 10.9851 24.1349 11.9615C24.1825 13.0173 24.1944 13.3308 24.1944 16.002C24.1944 18.6732 24.1825 18.9867 24.1349 20.0425C24.0913 21.0189 23.9286 21.5467 23.7897 21.9C23.6071 22.3683 23.3929 22.7017 23.0436 23.051C22.6944 23.4003 22.3611 23.6186 21.8929 23.7972C21.5397 23.9321 21.0119 24.0988 20.0357 24.1425C18.9802 24.1901 18.6667 24.202 15.996 24.202C13.3254 24.202 13.0119 24.1901 11.9563 24.1425C10.9802 24.0988 10.4524 23.9361 10.0992 23.7972C9.63095 23.6146 9.29762 23.4003 8.94841 23.051C8.59921 22.7017 8.38095 22.3683 8.20238 21.9C8.06746 21.5467 7.90079 21.0189 7.85714 20.0425C7.80952 18.9867 7.79762 18.6732 7.79762 16.002C7.79762 13.3308 7.80952 13.0173 7.85714 11.9615C7.90079 10.9851 8.06349 10.4572 8.20238 10.104C8.38492 9.63564 8.59921 9.30224 8.94841 8.95297C9.29762 8.60369 9.63095 8.38539 10.0992 8.20679C10.4524 8.07184 10.9802 7.90514 11.9563 7.86148C13.0119 7.80988 13.3294 7.80194 15.996 7.80194Z" />
         </symbol>

         <symbol id="social-discord" viewBox="0 0 32 32">
            <path d="M16.931 16.7655C16.931 16.0684 17.445 15.5084 18.0961 15.5084C18.7357 15.5084 19.2611 16.0684 19.2611 16.7655C19.2611 17.4627 18.7471 18.0226 18.0961 18.0226C17.4564 18.0226 16.931 17.4627 16.931 16.7655Z" />
            <path d="M12.762 16.7655C12.762 16.0684 13.2759 15.5084 13.927 15.5084C14.5781 15.5084 15.1035 16.0684 15.0921 16.7655C15.0921 17.4627 14.5781 18.0226 13.927 18.0226C13.2874 18.0226 12.762 17.4627 12.762 16.7655Z" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.34152 6H23.6471C24.9377 6 25.9886 7.05141 26 8.34282V29L20.6888 23.9083L21.2941 25.9996H8.34152C7.05083 25.9996 6 24.9482 6 23.6568V8.34282C6 7.05141 7.05083 6 8.34152 6ZM18.4843 19.8855C18.827 20.3083 19.2381 20.7997 19.2381 20.7997C21.6297 20.7239 22.6166 19.2428 22.7138 19.097C22.7192 19.0889 22.7219 19.0855 22.7219 19.0855C22.7219 15.4398 21.0771 12.4799 21.0771 12.4799C19.4437 11.257 17.8789 11.2913 17.8789 11.2913L17.719 11.4742C19.6608 12.057 20.5631 12.9142 20.5631 12.9142C19.3752 12.2742 18.2102 11.9542 17.1251 11.8285C16.3027 11.737 15.5146 11.7599 14.8178 11.8513C14.758 11.8513 14.7069 11.86 14.6493 11.8698C14.6409 11.8713 14.6324 11.8727 14.6236 11.8742C14.2239 11.9199 13.253 12.057 12.0308 12.5942C11.6082 12.777 11.3569 12.9142 11.3569 12.9142C11.3569 12.9142 12.2935 12.0113 14.3495 11.4285L14.2353 11.2913C14.2353 11.2913 12.6819 11.257 11.0371 12.4799C11.0371 12.4799 9.39235 15.4398 9.39235 19.0855C9.39235 19.0855 10.3518 20.7312 12.8761 20.8112C12.8761 20.8112 13.2987 20.3083 13.6413 19.874C12.1907 19.4398 11.6425 18.5369 11.6425 18.5369C11.6425 18.5369 11.7567 18.6169 11.9623 18.7312C11.9694 18.7312 11.9764 18.7356 11.9862 18.7416C11.9922 18.7453 11.9993 18.7497 12.008 18.7541C12.0251 18.7655 12.0423 18.7741 12.0594 18.7826C12.0765 18.7912 12.0937 18.7998 12.1108 18.8112C12.3963 18.9712 12.6819 19.0969 12.9446 19.1998C13.4129 19.394 13.9726 19.5655 14.6236 19.6912C15.4803 19.8512 16.4854 19.9083 17.582 19.7026C18.1188 19.5998 18.667 19.4512 19.2381 19.2112C19.6379 19.0626 20.0834 18.8455 20.5517 18.5369C20.5517 18.5369 19.9806 19.4626 18.4843 19.8855Z" />
         </symbol>

         <symbol id="social-email" viewBox="0 0 32 32">
            <path d="M6 11.5613L14.7505 18.5617C15.4809 19.1461 16.5188 19.1461 17.2493 18.5617L26 11.5612V21C26 21.5523 25.5523 22 25 22H7C6.44772 22 6 21.5523 6 21V11.5613Z" />
            <path d="M6.32622 9.26106L15.9999 17L25.6737 9.26097C25.4959 9.09886 25.2595 9 25 9H7C6.74043 9 6.50396 9.0989 6.32622 9.26106Z" />
         </symbol>

         <symbol id="social-linkdin" viewBox="0 0 32 32">
                <path d="M16.7552 14.9895V15.0206H16.735L16.7552 14.9895Z"  />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.47796 6C6.66169 6 6 6.64164 6 7.43267V24.5673C6 25.3586 6.66169 26 7.47796 26H24.522C25.3383 26 26 25.3586 26 24.5673V7.43267C26 6.64164 25.3383 6 24.522 6H7.47796ZM12.0641 13.7108V22.7419H9.04331V13.7108H12.0641ZM13.7344 22.7419H16.7551V17.6986C16.7551 17.4287 16.7747 17.159 16.8545 16.9661C17.0729 16.4268 17.5699 15.8683 18.4044 15.8683C19.4975 15.8683 19.9348 16.6964 19.9348 17.9105V22.7419H22.9553V17.5636C22.9553 14.7897 21.465 13.4989 19.4776 13.4989C17.8751 13.4989 17.1566 14.3741 16.7552 14.9895V13.7108H13.7344C13.774 14.5582 13.7344 22.7419 13.7344 22.7419ZM10.5 12C11.3284 12 12 11.3284 12 10.5C12 9.67157 11.3284 9 10.5 9C9.67157 9 9 9.67157 9 10.5C9 11.3284 9.67157 12 10.5 12Z" />
         </symbol>
          
    </svg>
              
            
!

CSS

              
                //colors
$iconColorBright: #808080;
$iconColorDark: #404040;

.icon-style {
    fill: $iconColorBright;
    width: 20px;
    height: 20px;
    pointer-events: none;

    &.medium-icon {
        width: 24px;
        height: 24px;
    }

    &.large-icon {
        width: 30px;
        height: 30px;
    }

    &.big-icon {
        width: 32px;
        height: 32px;
    }

    &.color-dark {
        fill: $iconColorDark;
    }
}


// global styles
body {
    padding: 0;
    margin: 0;
    background-color: #151515;
    color: #f4f4f4;
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4 {
    font-family: inherit; 
    padding: 0px 50px;
    font-weight: 500;
}

h1 {
    background: #202020;
    margin: 0px 0px 50px 0px;
    font-size: 36px;
    line-height: 100px;
}

h2 {
    margin: 0px 0px 50px 0px;
    font-size: 24px;
}

h3 {
    margin: 0px 0px 30px 0px;
    font-size: 18px;
}

h4 {
    color: #808080;
    margin: 0px 0px 20px 0px;
}

.container {
    padding: 0px 50px 50px 50px;

    .icon-style {
        margin-right: 10px;
    }
}

hr {
    border-top: 1px solid #404040;
    border-bottom: none;
    margin: 50px;
}
              
            
!

JS

              
                
              
            
!
999px

Console