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

Layout Pin

1K Views 59 Downloads - 12 API calls 25 Lines - 500 Bytes Apr 23, 2020 interfacedesigncontent
1.gg-layout-pin {
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;
9    border-radius: 3px
10}
11
12.gg-layout-pin::after {
13    content: "";
14    display: block;
15    box-sizing: border-box;
16    position: absolute;
17    width: 6px;
18    height: 6px;
19    border-radius: 4px;
20    top: 3px;
21    left: 3px;
22    box-shadow:
23        -7px 0 0,7px 0 0,
24        0 -7px 0,0 7px 0
25}
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="M16.9307 4.01587H14.7655C14.3582 2.84239 13.2428 2 11.9307 2C10.6185 2 9.50313 2.84239 9.09581 4.01587H6.93066C5.27381 4.01587 3.93066 5.35901 3.93066 7.01587V9.21205C2.80183 9.64283 2 10.7357 2 12.0159C2 13.296 2.80183 14.3889 3.93066 14.8197V17.0159C3.93066 18.6727 5.27381 20.0159 6.93066 20.0159H9.08467C9.48247 21.2064 10.6064 22.0645 11.9307 22.0645C13.255 22.0645 14.3789 21.2064 14.7767 20.0159H16.9307C18.5875 20.0159 19.9307 18.6727 19.9307 17.0159V14.8446C21.095 14.4322 21.929 13.3214 21.929 12.0159C21.929 10.7103 21.095 9.5995 19.9307 9.18718V7.01587C19.9307 5.35901 18.5875 4.01587 16.9307 4.01587ZM5.93066 14.8687V17.0159C5.93066 17.5682 6.37838 18.0159 6.93066 18.0159H9.11902C9.54426 16.8761 10.6427 16.0645 11.9307 16.0645C13.2187 16.0645 14.3171 16.8761 14.7423 18.0159H16.9307C17.4829 18.0159 17.9307 17.5682 17.9307 17.0159V14.8458C16.7646 14.4344 15.929 13.3227 15.929 12.0159C15.929 10.709 16.7646 9.59732 17.9307 9.18597V7.01587C17.9307 6.46358 17.4829 6.01587 16.9307 6.01587H14.7543C14.338 7.17276 13.2309 8 11.9307 8C10.6304 8 9.52331 7.17276 9.10703 6.01587H6.93066C6.37838 6.01587 5.93066 6.46358 5.93066 7.01587V9.16302C7.13193 9.55465 8 10.6839 8 12.0159C8 13.3479 7.13193 14.4771 5.93066 14.8687Z"
12    fill="currentColor"
13  />
14</svg>
1import React from 'react'
2import styled from 'styled-components'
3
4const StyledLayoutPin = 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;
13    border-radius: 3px;
14  }
15  &::after {
16    content: '';
17    display: block;
18    box-sizing: border-box;
19    position: absolute;
20    width: 6px;
21    height: 6px;
22    border-radius: 4px;
23    top: 3px;
24    left: 3px;
25    box-shadow: -7px 0 07px 0 00 -7px 00 7px 0;
26  }
27`
28
29export const LayoutPin = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
30  (props, ref) => {
31    return (
32      <>
33        <StyledLayoutPin {...props} ref={ref} icon-role="layout-pin" />
34      </>
35    )
36  },
37)
38
Layout Pin turned into a magic pure CSS icon built by applying attributes like: transform, width, height, border, border-radius, box-shadow,
Fun to know, it has: 25 Lines of code at 500b & 345b minified. Pretty stunning 🤩 for a CSS designed icon.

Thank you!

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