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">

Edit Noise

218 Views 8 Downloads - 7 API calls 28 Lines - 693 Bytes Apr 23, 2020 interfacedesign
1.gg-edit-noise {
2    box-sizing: border-box;
3    position: relative;
4    display: block;
5    transform: scale(var(--ggs,1));
6    width: 16px;
7    height: 16px;
8    border: 2px solid transparent;
9    box-shadow: 0 0 0 2px;
10    border-radius: 100px;
11    overflow: hidden
12}
13
14.gg-edit-noise::before {
15    content: "";
16    display: block;
17    box-sizing: border-box;
18    position: absolute;
19    width: 12px;
20    height: 12px;
21    background-image:
22      radial-gradient(circle,
23        currentColor 25%, transparent 25%),
24      radial-gradient(circle,
25        currentColor 25%, transparent 25%);
26      background-position: 4px 4px,2px 2px;
27    background-size: 4px 4px;
28}
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.4044 17.7657C10.419 17.7803 10.4329 17.7953 10.446 17.8108C10.1948 17.7439 9.95005 17.661 9.71293 17.5634C9.95429 17.5106 10.2167 17.578 10.4044 17.7657Z"
10    fill="currentColor"
11  />
12  <path
13    d="M8.43574 16.705C8.40862 16.7321 8.37994 16.7567 8.34999 16.7788C7.95661 16.4775 7.60163 16.1285 7.29364 15.7406C7.31765 15.7068 7.3448 15.6746 7.37508 15.6443C7.66797 15.3514 8.14285 15.3514 8.43574 15.6443C8.72863 15.9372 8.72863 16.4121 8.43574 16.705Z"
14    fill="currentColor"
15  />
16  <path
17    d="M6.37104 13.6475C6.59701 13.8735 6.64864 14.2077 6.52594 14.4832C6.38527 14.1723 6.27034 13.8472 6.18387 13.5107C6.25129 13.5454 6.31455 13.591 6.37104 13.6475Z"
18    fill="currentColor"
19  />
20  <path
21    d="M6.37104 10.6753C6.29401 10.7523 6.2044 10.8091 6.10883 10.8456C6.18637 10.4523 6.30234 10.0728 6.45268 9.71119C6.66079 10.004 6.63357 10.4128 6.37104 10.6753Z"
22    fill="currentColor"
23  />
24  <path
25    d="M7.37508 8.70669C7.28995 8.62156 7.22957 8.52106 7.19392 8.41413C7.45907 8.06093 7.76228 7.73793 8.09747 7.45124C8.22139 7.48394 8.33858 7.54887 8.43574 7.64603C8.72863 7.93892 8.72863 8.41379 8.43574 8.70669C8.14285 8.99958 7.66797 8.99958 7.37508 8.70669Z"
26    fill="currentColor"
27  />
28  <path
29    d="M9.34371 6.76662C9.31335 6.73627 9.28614 6.70396 9.26208 6.6701C9.6881 6.45171 10.1437 6.28277 10.6212 6.17088C10.6397 6.38399 10.5675 6.60352 10.4044 6.76662C10.1115 7.05952 9.6366 7.05952 9.34371 6.76662Z"
30    fill="currentColor"
31  />
32  <path
33    d="M13.2872 17.8734C13.5967 17.8055 13.8973 17.7136 14.1868 17.6C13.9165 17.4914 13.5957 17.5466 13.3766 17.7657C13.3429 17.7993 13.3131 17.8354 13.2872 17.8734Z"
34    fill="currentColor"
35  />
36  <path
37    d="M15.5312 16.8608C15.935 16.5658 16.3005 16.2216 16.619 15.8369C16.6005 15.8133 16.5803 15.7906 16.5586 15.7688C16.2657 15.4759 15.7908 15.4759 15.4979 15.7688C15.205 16.0617 15.205 16.5366 15.4979 16.8295C15.5088 16.8403 15.5199 16.8508 15.5312 16.8608Z"
38    fill="currentColor"
39  />
40  <path
41    d="M17.3654 14.6921C17.5637 14.2953 17.7194 13.8735 17.8264 13.4326C17.6636 13.451 17.5058 13.5227 17.3809 13.6475C17.0933 13.9351 17.0881 14.3982 17.3654 14.6921Z"
42    fill="currentColor"
43  />
44  <path
45    d="M17.8911 10.8934C17.8032 10.4272 17.6613 9.98016 17.4722 9.55885C17.4507 9.57609 17.4299 9.59469 17.4099 9.61465C17.117 9.90755 17.117 10.3824 17.4099 10.6753C17.5439 10.8093 17.7159 10.882 17.8911 10.8934Z"
46    fill="currentColor"
47  />
48  <path
49    d="M16.7556 8.35985C16.4971 8.02355 16.2038 7.71542 15.8811 7.44086C15.7407 7.46881 15.6068 7.5372 15.4979 7.64603C15.205 7.93892 15.205 8.41379 15.4979 8.70669C15.7908 8.99958 16.2657 8.99958 16.5586 8.70669C16.658 8.60729 16.7237 8.48694 16.7556 8.35985Z"
50    fill="currentColor"
51  />
52  <path
53    d="M14.4373 6.76662C14.4906 6.71331 14.5342 6.65397 14.5681 6.59079C14.1273 6.38127 13.6569 6.22392 13.1649 6.12671C13.1317 6.35331 13.2022 6.59223 13.3766 6.76662C13.6695 7.05952 14.1444 7.05952 14.4373 6.76662Z"
54    fill="currentColor"
55  />
56  <path
57    d="M12.5257 7.64603C12.8186 7.93892 12.8186 8.41379 12.5257 8.70669C12.2328 8.99958 11.7579 8.99958 11.465 8.70669C11.1721 8.41379 11.1721 7.93892 11.465 7.64603C11.7579 7.35313 12.2328 7.35313 12.5257 7.64603Z"
58    fill="currentColor"
59  />
60  <path
61    d="M10.4044 9.61465C10.6973 9.90755 10.6973 10.3824 10.4044 10.6753C10.1115 10.9682 9.6366 10.9682 9.34371 10.6753C9.05081 10.3824 9.05081 9.90755 9.34371 9.61465C9.6366 9.32176 10.1115 9.32176 10.4044 9.61465Z"
62    fill="currentColor"
63  />
64  <path
65    d="M8.43574 12.7967C8.72863 12.5038 8.72863 12.0289 8.43574 11.736C8.14285 11.4431 7.66797 11.4431 7.37508 11.736C7.08218 12.0289 7.08218 12.5038 7.37508 12.7967C7.66797 13.0895 8.14285 13.0895 8.43574 12.7967Z"
66    fill="currentColor"
67  />
68  <path
69    d="M10.4044 13.6475C10.6973 13.9404 10.6973 14.4153 10.4044 14.7082C10.1115 15.001 9.6366 15.001 9.34371 14.7082C9.05081 14.4153 9.05081 13.9404 9.34371 13.6475C9.6366 13.3546 10.1115 13.3546 10.4044 13.6475Z"
70    fill="currentColor"
71  />
72  <path
73    d="M12.5257 12.7967C12.8186 12.5038 12.8186 12.0289 12.5257 11.736C12.2328 11.4431 11.7579 11.4431 11.465 11.736C11.1721 12.0289 11.1721 12.5038 11.465 12.7967C11.7579 13.0895 12.2328 13.0895 12.5257 12.7967Z"
74    fill="currentColor"
75  />
76  <path
77    d="M14.4373 9.61465C14.7302 9.90755 14.7302 10.3824 14.4373 10.6753C14.1444 10.9682 13.6695 10.9682 13.3766 10.6753C13.0837 10.3824 13.0837 9.90755 13.3766 9.61465C13.6695 9.32176 14.1444 9.32176 14.4373 9.61465Z"
78    fill="currentColor"
79  />
80  <path
81    d="M16.5586 12.7681C16.8515 12.4752 16.8515 12.0003 16.5586 11.7074C16.2657 11.4145 15.7908 11.4145 15.4979 11.7074C15.205 12.0003 15.205 12.4752 15.4979 12.7681C15.7908 13.061 16.2657 13.061 16.5586 12.7681Z"
82    fill="currentColor"
83  />
84  <path
85    d="M14.423 13.6902C14.7159 13.9831 14.7159 14.458 14.423 14.7509C14.1301 15.0438 13.6552 15.0438 13.3623 14.7509C13.0694 14.458 13.0694 13.9831 13.3623 13.6902C13.6552 13.3973 14.1301 13.3973 14.423 13.6902Z"
86    fill="currentColor"
87  />
88  <path
89    d="M12.3159 16.705C12.6088 16.4121 12.6088 15.9372 12.3159 15.6443C12.023 15.3514 11.5482 15.3514 11.2553 15.6443C10.9624 15.9372 10.9624 16.4121 11.2553 16.705C11.5482 16.9979 12.023 16.9979 12.3159 16.705Z"
90    fill="currentColor"
91  />
92  <path
93    fill-rule="evenodd"
94    clip-rule="evenodd"
95    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 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
96    fill="currentColor"
97  />
98</svg>
1import React from 'react'
2import styled from 'styled-components'
3
4const StyledEditNoise = styled.i`
5  & {
6    box-sizing: border-box;
7    position: relative;
8    display: block;
9    transform: scale(var(--ggs, 1));
10    width: 16px;
11    height: 16px;
12    border: 2px solid transparent;
13    box-shadow: 0 0 0 2px;
14    border-radius: 100px;
15    overflow: hidden;
16  }
17  &::before {
18    content: '';
19    display: block;
20    box-sizing: border-box;
21    position: absolute;
22    width: 12px;
23    height: 12px;
24    background-image: radial-gradient(circle, currentColor 25%, transparent 25%),
25      radial-gradient(circle, currentColor 25%, transparent 25%);
26    background-position: 4px 4px2px 2px;
27    background-size: 4px 4px;
28  }
29`
30
31export const EditNoise = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
32  (props, ref) => {
33    return (
34      <>
35        <StyledEditNoise {...props} ref={ref} icon-role="edit-noise" />
36      </>
37    )
38  },
39)
40
Edit Noise ended up an amazing CSS icon created by adopting features as follows: transform, width, height, border, box-shadow, border-radius, overflow, background-image, background- background-size,
Some stats, it has: 28 Lines of code at 693b & 510b after compiling. Quite awesome 🙆‍♂️ for a CSS designed icon.

Thank you!

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