6000+ variable glyphs now on Figma 👉 👉 👉
Vote for CSS.GG on the Figma Community Awards
VOTE NOW
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">

Debug

2K Views 49 Downloads - 10 API calls 45 Lines - 812 Bytes Apr 23, 2020 designinterface
1.gg-debug {
2   box-sizing: border-box;
3   position: relative;
4   display: block;
5   transform: scale(var(--ggs,1));
6   width: 12px;
7   height: 18px;
8   border: 2px solid;
9   border-radius: 22px
10}
11
12.gg-debug::after,
13.gg-debug::before {
14   content: "";
15   display: block;
16   box-sizing: border-box;
17   position: absolute
18}
19
20.gg-debug::before {
21   width: 8px;
22   height: 4px;
23   border: 2px solid;
24   top: -4px;
25   border-bottom-left-radius: 10px;
26   border-bottom-right-radius: 10px;
27   border-top: 0
28}
29
30.gg-debug::after {
31   background: currentColor;
32   width: 4px;
33   height: 2px;
34   border-radius: 5px;
35   top: 4px;
36   left: 2px;
37   box-shadow:
38      0 4px 0,
39      -6px -2px 0,
40      -6px 2px 0,
41      -6px 6px 0,
42      6px -2px 0,
43      6px 2px 0,
44      6px 6px 0
45}
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    d="M10 11C10 10.4477 10.4477 10 11 10H13C13.5523 10 14 10.4477 14 11C14 11.5523 13.5523 12 13 12H11C10.4477 12 10 11.5523 10 11Z"
10    fill="currentColor"
11  />
12  <path
13    d="M11 14C10.4477 14 10 14.4477 10 15C10 15.5523 10.4477 16 11 16H13C13.5523 16 14 15.5523 14 15C14 14.4477 13.5523 14 13 14H11Z"
14    fill="currentColor"
15  />
16  <path
17    fill-rule="evenodd"
18    clip-rule="evenodd"
19    d="M9.09447 4.74918C8.41606 4.03243 8 3.0648 8 2H10C10 3.10457 10.8954 4 12 4C13.1046 4 14 3.10457 14 2H16C16 3.0648 15.5839 4.03243 14.9055 4.74918C16.1782 5.45491 17.1673 6.6099 17.6586 8H19C19.5523 8 20 8.44772 20 9C20 9.55229 19.5523 10 19 10H18V12H19C19.5523 12 20 12.4477 20 13C20 13.5523 19.5523 14 19 14H18V16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H17.6586C16.8349 20.3304 14.6124 22 12 22C9.38756 22 7.16508 20.3304 6.34141 18H5C4.44772 18 4 17.5523 4 17C4 16.4477 4.44772 16 5 16H6V14H5C4.44772 14 4 13.5523 4 13C4 12.4477 4.44772 12 5 12H6V10H5C4.44772 10 4 9.55229 4 9C4 8.44772 4.44772 8 5 8H6.34141C6.83274 6.6099 7.82181 5.45491 9.09447 4.74918ZM8 16V10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10V16C16 18.2091 14.2091 20 12 20C9.79086 20 8 18.2091 8 16Z"
20    fill="currentColor"
21  />
22</svg>
1import React from 'react'
2import styled from 'styled-components'
3
4const StyledDebug = styled.i`
5  & {
6    box-sizing: border-box;
7    position: relative;
8    display: block;
9    transform: scale(var(--ggs, 1));
10    width: 12px;
11    height: 18px;
12    border: 2px solid;
13    border-radius: 22px;
14  }
15  &::after,
16  &::before {
17    content: '';
18    display: block;
19    box-sizing: border-box;
20    position: absolute;
21  }
22  &::before {
23    width: 8px;
24    height: 4px;
25    border: 2px solid;
26    top: -4px;
27    border-bottom-left-radius: 10px;
28    border-bottom-right-radius: 10px;
29    border-top: 0;
30  }
31  &::after {
32    background: currentColor;
33    width: 4px;
34    height: 2px;
35    border-radius: 5px;
36    top: 4px;
37    left: 2px;
38    box-shadow: 0 4px 0-6px -2px 0-6px 2px 0-6px 6px 06px -2px 06px 2px 06px 6px 0;
39  }
40`
41
42export const Debug = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
43  (props, ref) => {
44    return (
45      <>
46        <StyledDebug {...props} ref={ref} icon-role="debug" />
47      </>
48    )
49  },
50)
51
Debug turned into a wonderful pure CSS icon made by practicing attributes as follows: transform, width, height, border, border-radius, border-top, box-shadow,
Some stats, it has: 45 Lines of code at 812b & 575b after compression. Pretty amazing 😲 huhh.

Thank you!

Thank you for downloading CSS GG icons
This project is free and it will be, support us by subscribing ❤️ Subscribe @astrit