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

Smart Home Wash Machine

851 Views 33 Downloads - 7 API calls 44 Lines - 938 Bytes Apr 23, 2020 interface
1.gg-smart-home-wash-machine {
2    display: block;
3    position: relative;
4    box-sizing: border-box;
5    transform: scale(var(--ggs,1));
6    width: 18px;
7    height: 20px;
8    border: 2px solid;
9    background:
10        linear-gradient(
11            to left,
12            currentColor 18px,
13            transparent 0
14        ) no-repeat center 4px/18px 2px;
15    border-radius: 3px
16}
17
18.gg-smart-home-wash-machine::after,
19.gg-smart-home-wash-machine::before {
20    content: "";
21    position: absolute;
22    display: block;
23    box-sizing: border-box;
24    border-radius: 22px
25}
26
27.gg-smart-home-wash-machine::before {
28    bottom: 1px;
29    left: 3px;
30    width: 8px;
31    height: 8px;
32    border: 2px solid;
33    box-shadow:
34        5px -9px 0 -3px,
35        2px -9px 0 -3px
36}
37
38.gg-smart-home-wash-machine::after {
39    top: 1px;
40    left: 1px;
41    width: 4px;
42    height: 2px;
43    background: currentColor
44}
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="M6 4H18C18.5523 4 19 4.44772 19 5V8H5V5C5 4.44772 5.44771 4 6 4ZM19 19V10H5V19C5 19.5523 5.44772 20 6 20H18C18.5523 20 19 19.5523 19 19ZM3 5C3 3.34315 4.34315 2 6 2H18C19.6569 2 21 3.34315 21 5V19C21 20.6569 19.6569 22 18 22H6C4.34315 22 3 20.6569 3 19V5ZM7 5C6.44772 5 6 5.44772 6 6C6 6.55228 6.44772 7 7 7H9C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5H7ZM14 7C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5C13.4477 5 13 5.44772 13 6C13 6.55228 13.4477 7 14 7ZM18 6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6C16 5.44772 16.4477 5 17 5C17.5523 5 18 5.44772 18 6ZM14 15C14 16.1046 13.1046 17 12 17C10.8954 17 10 16.1046 10 15C10 13.8954 10.8954 13 12 13C13.1046 13 14 13.8954 14 15ZM16 15C16 17.2091 14.2091 19 12 19C9.79086 19 8 17.2091 8 15C8 12.7909 9.79086 11 12 11C14.2091 11 16 12.7909 16 15Z"
12    fill="currentColor"
13  />
14</svg>
1import React from 'react'
2import styled from 'styled-components'
3
4const StyledSmartHomeWashMachine = styled.i`
5  & {
6    display: block;
7    position: relative;
8    box-sizing: border-box;
9    transform: scale(var(--ggs, 1));
10    width: 18px;
11    height: 20px;
12    border: 2px solid;
13    background: linear-gradient(to left, currentColor 18px, transparent 0) no-repeat center 4px/18px
14      2px;
15    border-radius: 3px;
16  }
17  &::after,
18  &::before {
19    content: '';
20    position: absolute;
21    display: block;
22    box-sizing: border-box;
23    border-radius: 22px;
24  }
25  &::before {
26    bottom: 1px;
27    left: 3px;
28    width: 8px;
29    height: 8px;
30    border: 2px solid;
31    box-shadow: 5px -9px 0 -3px2px -9px 0 -3px;
32  }
33  &::after {
34    top: 1px;
35    left: 1px;
36    width: 4px;
37    height: 2px;
38    background: currentColor;
39  }
40`
41
42export const SmartHomeWashMachine = React.forwardRef<
43  HTMLElement,
44  React.HTMLAttributes<HTMLElement>
45>((props, ref) => {
46  return (
47    <>
48      <StyledSmartHomeWashMachine {...props} ref={ref} icon-role="smart-home-wash-machine" />
49    </>
50  )
51})
52
Smart Home Wash Machine became a 100% CSS icon built by using features such as: transform, width, height, border, background, border-radius, box-shadow,
Some stats, it has: 44 Lines of code at 938b & 657b minified. Quite stunning 🤩 don't you think ?.

Thank you!

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