Open inFigma
<link href="@import url('https://css.gg/csscssjsonxml?=|abstract|add-r|add|adidas|airplane|alarm|album|align-bottom|align-center|align-left|align-middle|align-right|align-top|anchor|apple-watch|arrange-back|arrange-front|arrow-align-h|arrow-align-v|arrow-bottom-left-o|arrow-bottom-left-r|arrow-bottom-left|arrow-bottom-right-o|arrow-bottom-right-r|arrow-bottom-right|arrow-down-o|arrow-down-r|arrow-down|arrow-left-o|arrow-left-r|arrow-left|arrow-long-down-c|arrow-long-down-e|arrow-long-down-l|arrow-long-down-r|arrow-long-down|arrow-long-left-c|arrow-long-left-e|arrow-long-left-l|arrow-long-left-r|arrow-long-left|arrow-long-right-c|arrow-long-right-e|arrow-long-right-l|arrow-long-right-r|arrow-long-right|arrow-long-up-c|arrow-long-up-e|arrow-long-up-l|arrow-long-up-r|arrow-long-up|arrow-right-o|arrow-right-r|arrow-right|arrow-top-left-o|arrow-top-left-r|arrow-top-left|arrow-top-right-o|arrow-top-right-r|arrow-top-right|arrow-up-o|arrow-up-r|arrow-up|arrows-breake-h|arrows-breake-v|arrows-exchange-alt-v|arrows-exchange-alt|arrows-exchange-v|arrows-exchange|arrows-expand-down-left|arrows-expand-down-right|arrows-expand-left-alt|arrows-expand-left|arrows-expand-right-alt|arrows-expand-right|arrows-expand-up-left|arrows-expand-up-right|arrows-h-alt|arrows-h|arrows-merge-alt-h|arrows-merge-alt-v|arrows-scroll-h|arrows-scroll-v|arrows-shrink-h|arrows-shrink-v|arrows-v-alt|arrows-v|assign|asterisk|atlasian|attachment|attribution|awards|backspace|band-aid|battery-empty|battery-full|battery|bee|bell|bitbucket|block|bmw|board|bolt|bookmark|border-all|border-bottom|border-left|border-right|border-style-dashed|border-style-dotted|border-style-solid|border-top|bot|bowl|box|boy|brackets|briefcase|browse|browser|brush|bulb|c-plus-plus|calculator|calendar-dates|calendar-due|calendar-next|calendar-today|calendar-two|calendar|calibrate|camera|cap|captions|card-clubs|card-diamonds|card-hearts|card-spades|carousel|cast|chanel|chart|check-o|check-r|check|chevron-double-down-o|chevron-double-down-r|chevron-double-down|chevron-double-left-o|chevron-double-left-r|chevron-double-left|chevron-double-right-o|chevron-double-right-r|chevron-double-right|chevron-double-up-o|chevron-double-up-r|chevron-double-up|chevron-down-o|chevron-down-r|chevron-down|chevron-left-o|chevron-left-r|chevron-left|chevron-right-o|chevron-right-r|chevron-right|chevron-up-o|chevron-up-r|chevron-up|circleci|clapper-board|clipboard|close-o|close-r|close|cloud|code-climate|code-slash|code|coffee|collage|color-bucket|color-picker|comedy-central|comment|community|components|compress-left|compress-right|compress-v|compress|controller|copy|copyright|corner-double-down-left|corner-double-down-right|corner-double-left-down|corner-double-left-up|corner-double-right-down|corner-double-right-up|corner-double-up-left|corner-double-up-right|corner-down-left|corner-down-right|corner-left-down|corner-left-up|corner-right-down|corner-right-up|corner-up-left|corner-up-right|credit-card|crop|cross|crowdfire|crown|danger|dark-mode|data|database|debug|designmodo|desktop|details-less|details-more|dialpad|dice-1|dice-2|dice-3|dice-4|dice-5|dice-6|digitalocean|disc|display-flex|display-fullwidth|display-grid|display-spacing|distribute-horizontal|distribute-vertical|dock-bottom|dock-left|dock-right|dock-window|dolby|dollar|dribbble|drive|drop-invert|drop-opacity|drop|duplicate|edit-black-point|edit-contrast|edit-exposure|edit-fade|edit-flip-h|edit-flip-v|edit-highlight|edit-markup|edit-mask|edit-noise|edit-shadows|edit-straight|edit-unmask|eject|enter|erase|ereader|ericsson|ethernet|euro|eventbrite|expand|export|extension-add|extension-alt|extension-remove|extension|external|eye-alt|eye|facebook|feed|figma|file-add|file-document|file-remove|file|film|filters|flag-alt|flag|folder-add|folder-remove|folder|font-height|font-spacing|format-bold|format-center|format-color|format-heading|format-indent-decrease|format-indent-increase|format-italic|format-justify|format-left|format-line-height|format-right|format-separator|format-slash|format-strike|format-text|format-underline|format-uppercase|framer|games|gender-female|gender-male|ghost-character|ghost|gift|girl|git-branch|git-commit|git-fork|git-pull|gitter|glass-alt|glass|globe-alt|globe|google-tasks|google|gym|hashtag|headset|heart|hello|home-alt|home-screen|home|icecream|if-design|image|import|inbox|indie-hackers|infinity|info|inpicture|insert-after-o|insert-after-r|insert-after|insert-before-o|insert-before-r|insert-before|insights|instagram|internal|key|keyboard|keyhole|laptop|lastpass|layout-grid-small|layout-grid|layout-list|layout-pin|linear|link|list-tree|list|live-photo|loadbar-alt|loadbar-doc|loadbar-sound|loadbar|lock-unlock|lock|log-in|log-off|log-out|loupe|magnet|mail-forward|mail-open|mail-reply|mail|math-divide|math-equal|math-minus|math-percent|math-plus|maximize-alt|maximize|maze|media-live|media-podcast|menu-boxed|menu-cake|menu-cheese|menu-grid-o|menu-grid-r|menu-hotdog|menu-left-alt|menu-left|menu-motion|menu-oreos|menu-right-alt|menu-right|menu-round|menu|merge-horizontal|merge-vertical|mic|microbit|microsoft|mini-player|minimize-alt|minimize|modem|monday|moon|more-alt|more-o|more-r|more-vertical-alt|more-vertical-o|more-vertical-r|more-vertical|more|mouse|move-down|move-left|move-right|move-task|move-up|music-note|music-speaker|music|nametag|notes|notifications|npm|oculus|open-collective|options|organisation|overflow|pacman|password|path-back|path-crop|path-divide|path-exclude|path-front|path-intersect|path-outline|path-trim|path-unite|patreon|paypal|pen|pentagon-bottom-left|pentagon-bottom-right|pentagon-down|pentagon-left|pentagon-right|pentagon-top-left|pentagon-top-right|pentagon-up|performance|pexels|phone|photoscan|piano|pill|pin-alt|pin-bottom|pin-top|pin|play-backwards|play-button-o|play-button-r|play-button|play-forwards|play-list-add|play-list-check|play-list-remove|play-list-search|play-list|play-pause-o|play-pause-r|play-pause|play-stop-o|play-stop-r|play-stop|play-track-next-o|play-track-next-r|play-track-next|play-track-prev-o|play-track-prev-r|play-track-prev|plug|pocket|pokemon|polaroid|poll|presentation|printer|product-hunt|profile|pull-clear|push-chevron-down-o|push-chevron-down-r|push-chevron-down|push-chevron-left-o|push-chevron-left-r|push-chevron-left|push-chevron-right-o|push-chevron-right-r|push-chevron-right|push-chevron-up-o|push-chevron-up-r|push-chevron-up|push-down|push-left|push-right|push-up|qr|quote-o|quote|radio-check|radio-checked|ratio|read|readme|record|redo|remote|remove-r|remove|rename|reorder|repeat|ring|row-first|row-last|ruler|sand-clock|scan|screen-mirror|screen-shot|screen-wide|screen|scroll-h|scroll-v|search-found|search-loading|search|select-o|select-r|select|server|serverless|shape-circle|shape-half-circle|shape-hexagon|shape-rhombus|shape-square|shape-triangle|shape-zigzag|share|shield|shopping-bag|shopping-cart|shortcut|shutterstock|sidebar-open|sidebar-right|sidebar|signal|size|sketch|slack|sleep|smart-home-boiler|smart-home-cooker|smart-home-heat|smart-home-light|smart-home-refrigerator|smart-home-wash-machine|smartphone-chip|smartphone-ram|smartphone-shake|smartphone|smile-mouth-open|smile-neutral|smile-no-mouth|smile-none|smile-sad|smile-upside|smile|software-download|software-upload|sort-az|sort-za|space-between-v|space-between|spectrum|spinner-alt|spinner-two-alt|spinner-two|spinner|square|stack|stark|stopwatch|stories|studio|style|sun|support|swap-vertical|swap|sweden|swiss|sync|tab|tag|tally|tap-double|tap-single|template|tennis|terminal|terrain|thermometer|thermostat|tikcode|time|timelapse|timer|today|toggle-off|toggle-on|toggle-square-off|toggle-square|toolbar-bottom|toolbar-left|toolbar-right|toolbar-top|toolbox|touchpad|track|transcript|trash-empty|trash|tree|trees|trello|trending-down|trending|trophy|tv|twilio|twitter|ui-kit|umbrella|unavailable|unblock|undo|unfold|unsplash|usb-c|usb|user-add|user-list|user-remove|user|userlane|view-cols|view-comfortable|view-day|view-grid|view-list|view-month|view-split|vinyl|voicemail-o|voicemail-r|voicemail|volume|webcam|website|windows|work-alt|yinyang|youtube|zeit|zoom-in|zoom-out');" rel="stylesheet">

Browse

222 Views 6 Downloads - 5 API calls 47 Lines - 964 Bytes Apr 23, 2020 interfacedesigncontent
1.gg-browse {
2    display: block;
3    position: relative;
4    transform: scale(var(--ggs,1));
5    box-sizing: border-box;
6    width: 16px;
7    height: 22px;
8    border: 2px solid;
9    border-radius: 3px;
10    background:
11        linear-gradient(
12            to left,
13            currentcolor 10px,
14            transparent 0
15        ) no-repeat center 2px/8px 2px,
16        linear-gradient(
17            to left,
18            currentcolor 10px,
19            transparent 0
20        ) no-repeat center 6px/8px 2px
21}
22
23.gg-browse::after,
24.gg-browse::before {
25    content: "";
26    display: block;
27    box-sizing: border-box;
28    position: absolute;
29    border-radius: 22px
30}
31
32.gg-browse::before {
33    width: 6px;
34    height: 6px;
35    border: 2px solid;
36    left: 3px;
37    top: 9px
38}
39
40.gg-browse::after {
41    width: 2px;
42    height: 4px;
43    background: currentColor;
44    bottom: 1px;
45    right: 2px;
46    transform: rotate(-45deg)
47}
1<svg
2  width="24"
3  height="24"
4  viewBox="0 0 24 24"
5  fill="none"
6  xmlns="http://www.w3.org/2000/svg"
7>
8  <path
9    fill-rule="evenodd"
10    clip-rule="evenodd"
11    d="M14.364 13.1214C15.2876 14.045 15.4831 15.4211 14.9504 16.5362L16.4853 18.0711C16.8758 18.4616 16.8758 19.0948 16.4853 19.4853C16.0948 19.8758 15.4616 19.8758 15.0711 19.4853L13.5361 17.9504C12.421 18.4831 11.045 18.2876 10.1213 17.364C8.94975 16.1924 8.94975 14.2929 10.1213 13.1214C11.2929 11.9498 13.1924 11.9498 14.364 13.1214ZM12.9497 15.9498C13.3403 15.5593 13.3403 14.9261 12.9497 14.5356C12.5592 14.145 11.9261 14.145 11.5355 14.5356C11.145 14.9261 11.145 15.5593 11.5355 15.9498C11.9261 16.3403 12.5592 16.3403 12.9497 15.9498Z"
12    fill="currentColor"
13  />
14  <path d="M8 5H16V7H8V5Z" fill="currentColor" />
15  <path d="M16 9H8V11H16V9Z" fill="currentColor" />
16  <path
17    fill-rule="evenodd"
18    clip-rule="evenodd"
19    d="M4 4C4 2.34315 5.34315 1 7 1H17C18.6569 1 20 2.34315 20 4V20C20 21.6569 18.6569 23 17 23H7C5.34315 23 4 21.6569 4 20V4ZM7 3H17C17.5523 3 18 3.44772 18 4V20C18 20.5523 17.5523 21 17 21H7C6.44772 21 6 20.5523 6 20V4C6 3.44772 6.44771 3 7 3Z"
20    fill="currentColor"
21  />
22</svg>
1import React from 'react'
2import styled from 'styled-components'
3
4const StyledBrowse = styled.i`
5  & {
6    display: block;
7    position: relative;
8    transform: scale(var(--ggs, 1));
9    box-sizing: border-box;
10    width: 16px;
11    height: 22px;
12    border: 2px solid;
13    border-radius: 3px;
14    background: linear-gradient(to left, currentcolor 10px, transparent 0) no-repeat center 2px/8px
15        2px,
16      linear-gradient(to left, currentcolor 10px, transparent 0) no-repeat center 6px/8px 2px;
17  }
18  &::after,
19  &::before {
20    content: '';
21    display: block;
22    box-sizing: border-box;
23    position: absolute;
24    border-radius: 22px;
25  }
26  &::before {
27    width: 6px;
28    height: 6px;
29    border: 2px solid;
30    left: 3px;
31    top: 9px;
32  }
33  &::after {
34    width: 2px;
35    height: 4px;
36    background: currentColor;
37    bottom: 1px;
38    right: 2px;
39    transform: rotate(-45deg);
40  }
41`
42
43export const Browse = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
44  (props, ref) => {
45    return (
46      <>
47        <StyledBrowse {...props} ref={ref} icon-role="browse" />
48      </>
49    )
50  },
51)
52
Browse turned into an amazing 100% CSS icon built by practicing properties such as: transform, width, height, border, border-radius, background,
Some stats, it has: 47 Lines of code at 964b & 640b after compiling. Quite wonderful 🤗 for a icon designed by code.

Thank you!

Thank you for downloading CSS GG icons
Make sure to follow us Follow