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

Live Photo

Views 13 Downloads - 5 API calls 27 Lines - 528 Bytes Apr 23, 2020 multimediadesign
1.gg-live-photo {
2    transform: scale(var(--ggs,1))
3}
4
5.gg-live-photo,
6.gg-live-photo::after {
7    box-sizing: border-box;
8    position: relative;
9    display: block;
10    width: 20px;
11    height: 20px;
12    border-radius: 100px;
13    border: 2px dotted currentColor
14}
15
16.gg-live-photo::after {
17    content: "";
18    position: absolute;
19    width: 8px;
20    height: 8px;
21    border: 1px solid transparent;
22    top: 4px;
23    left: 4px;
24    box-shadow:
25        0 0 0 2px,
26        inset 0 0 0 2px currentColor
27}
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="M12.9805 21.9525C12.6579 21.9839 12.3308 22 12 22C11.6692 22 11.3421 21.9839 11.0194 21.9525L11.2132 19.9619C11.4715 19.9871 11.7339 20 12 20C12.2661 20 12.5285 19.9871 12.7868 19.9619L12.9805 21.9525Z"
10    fill="currentColor"
11  />
12  <path
13    d="M9.09617 21.5719L9.67608 19.6578C9.17124 19.5048 8.68725 19.3031 8.22951 19.058L7.28519 20.821C7.8578 21.1277 8.46374 21.3803 9.09617 21.5719Z"
14    fill="currentColor"
15  />
16  <path
17    d="M5.65597 19.7304L6.92562 18.1851C6.5202 17.852 6.14801 17.4798 5.81491 17.0744L4.2696 18.344C4.68539 18.8501 5.1499 19.3146 5.65597 19.7304Z"
18    fill="currentColor"
19  />
20  <path
21    d="M3.17901 16.7148L4.94204 15.7705C4.69686 15.3127 4.49516 14.8288 4.34221 14.3239L2.42813 14.9038C2.61974 15.5363 2.87231 16.1422 3.17901 16.7148Z"
22    fill="currentColor"
23  />
24  <path
25    d="M2.04746 12.9805L4.03806 12.7868C4.01292 12.5285 4 12.2661 4 12C4 11.7339 4.01292 11.4715 4.03806 11.2132L2.04746 11.0195C2.01607 11.3421 2 11.6692 2 12C2 12.3308 2.01607 12.6579 2.04746 12.9805Z"
26    fill="currentColor"
27  />
28  <path
29    d="M2.42813 9.09617L4.34221 9.67608C4.49517 9.17124 4.69686 8.68725 4.94204 8.22951L3.17901 7.28519C2.87231 7.8578 2.61974 8.46374 2.42813 9.09617Z"
30    fill="currentColor"
31  />
32  <path
33    d="M4.2696 5.65597L5.81491 6.92562C6.14801 6.5202 6.5202 6.14801 6.92562 5.81491L5.65597 4.2696C5.14991 4.68539 4.68539 5.1499 4.2696 5.65597Z"
34    fill="currentColor"
35  />
36  <path
37    d="M7.2852 3.17901L8.22951 4.94204C8.68726 4.69686 9.17124 4.49516 9.67608 4.34221L9.09617 2.42813C8.46374 2.61974 7.8578 2.87231 7.2852 3.17901Z"
38    fill="currentColor"
39  />
40  <path
41    d="M11.0195 2.04746C11.3421 2.01607 11.6692 2 12 2C12.3308 2 12.6579 2.01607 12.9805 2.04746L12.7868 4.03806C12.5285 4.01292 12.2661 4 12 4C11.7339 4 11.4715 4.01292 11.2132 4.03806L11.0195 2.04746Z"
42    fill="currentColor"
43  />
44  <path
45    d="M14.9038 2.42813L14.3239 4.34221C14.8288 4.49517 15.3127 4.69686 15.7705 4.94204L16.7148 3.17901C16.1422 2.87231 15.5363 2.61974 14.9038 2.42813Z"
46    fill="currentColor"
47  />
48  <path
49    d="M18.344 4.2696L17.0744 5.81491C17.4798 6.14801 17.852 6.5202 18.1851 6.92562L19.7304 5.65597C19.3146 5.14991 18.8501 4.68539 18.344 4.2696Z"
50    fill="currentColor"
51  />
52  <path
53    d="M20.821 7.2852L19.058 8.22951C19.3031 8.68726 19.5048 9.17124 19.6578 9.67608L21.5719 9.09617C21.3803 8.46374 21.1277 7.8578 20.821 7.2852Z"
54    fill="currentColor"
55  />
56  <path
57    d="M21.9525 11.0195L19.9619 11.2132C19.9871 11.4715 20 11.7339 20 12C20 12.2661 19.9871 12.5285 19.9619 12.7868L21.9525 12.9806C21.9839 12.6579 22 12.3308 22 12C22 11.6692 21.9839 11.3421 21.9525 11.0195Z"
58    fill="currentColor"
59  />
60  <path
61    d="M21.5719 14.9038L19.6578 14.3239C19.5048 14.8288 19.3031 15.3127 19.058 15.7705L20.821 16.7148C21.1277 16.1422 21.3803 15.5363 21.5719 14.9038Z"
62    fill="currentColor"
63  />
64  <path
65    d="M19.7304 18.344L18.1851 17.0744C17.852 17.4798 17.4798 17.852 17.0744 18.1851L18.344 19.7304C18.8501 19.3146 19.3146 18.8501 19.7304 18.344Z"
66    fill="currentColor"
67  />
68  <path
69    d="M16.7148 20.821L15.7705 19.058C15.3127 19.3031 14.8288 19.5048 14.3239 19.6578L14.9038 21.5719C15.5363 21.3803 16.1422 21.1277 16.7148 20.821Z"
70    fill="currentColor"
71  />
72  <path
73    fill-rule="evenodd"
74    clip-rule="evenodd"
75    d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12ZM12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13Z"
76    fill="currentColor"
77  />
78  <path
79    fill-rule="evenodd"
80    clip-rule="evenodd"
81    d="M12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6ZM8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12Z"
82    fill="currentColor"
83  />
84</svg>
1import React from 'react'
2import styled from 'styled-components'
3
4const StyledLivePhoto = styled.i`
5  & {
6    transform: scale(var(--ggs, 1));
7  }
8  &,
9  &::after {
10    box-sizing: border-box;
11    position: relative;
12    display: block;
13    width: 20px;
14    height: 20px;
15    border-radius: 100px;
16    border: 2px dotted currentColor;
17  }
18  &::after {
19    content: '';
20    position: absolute;
21    width: 8px;
22    height: 8px;
23    border: 1px solid transparent;
24    top: 4px;
25    left: 4px;
26    box-shadow: 0 0 0 2px, inset 0 0 0 2px currentColor;
27  }
28`
29
30export const LivePhoto = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
31  (props, ref) => {
32    return (
33      <>
34        <StyledLivePhoto {...props} ref={ref} icon-role="live-photo" />
35      </>
36    )
37  },
38)
39
Live Photo turned into a 100% CSS icon created by practicing attributes as follows: transform, width, height, border-radius, border, box-shadow,
Some stats, it has: 27 Lines of code at 528b & 378b minified. Truly stunning 🤩 huhh.

Thank you!

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