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

Chanel

2K Views 47 Downloads - 25 API calls 30 Lines - 550 Bytes Apr 23, 2020 brands
1.gg-chanel {
2    box-sizing: border-box;
3    position: relative;
4    display: block;
5    transform: scale(var(--ggs,1));
6    width: 21px;
7    height: 18px
8}
9
10.gg-chanel::after,
11.gg-chanel::before {
12    content: "";
13    display: block;
14    position: absolute;
15    box-sizing: border-box;
16    border: 3px solid;
17    width: 18px;
18    height: 18px;
19    border-radius: 22px
20}
21
22.gg-chanel::before {
23    border-left-color: transparent;
24    left: -3px
25}
26
27.gg-chanel::after {
28    border-right-color: transparent;
29    right: -3px
30}
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.07178 3.17291C4.32593 3.5202 2.72229 4.37738 1.46362 5.63605L3.59332 7.76575C4.43079 6.92835 5.4978 6.35803 6.65936 6.12695C7.53564 5.95264 8.43604 5.9773 9.29523 6.19452C9.0791 6.45056 8.87671 6.71936 8.68927 6.99988C7.70032 8.47992 7.17249 10.22 7.17249 12C7.17249 13.78 7.70032 15.5201 8.68927 17.0001C8.87671 17.2806 9.07916 17.5494 9.29529 17.8055C8.4361 18.0227 7.53564 18.0474 6.65936 17.873C5.4978 17.642 4.43079 17.0717 3.59332 16.2343L1.46362 18.364C2.72229 19.6226 4.32593 20.4798 6.07178 20.8271C7.81757 21.1743 9.6272 20.9961 11.2717 20.3149C11.5201 20.212 11.7632 20.0983 12.0001 19.9744C12.2369 20.0983 12.4799 20.212 12.7283 20.3149C14.3729 20.9961 16.1825 21.1743 17.9283 20.8271C19.6741 20.4798 21.2778 19.6226 22.5364 18.364L20.4067 16.2343C19.5693 17.0717 18.5023 17.642 17.3407 17.873C16.4644 18.0474 15.564 18.0227 14.7048 17.8055C14.9209 17.5494 15.1234 17.2806 15.3108 17.0001C16.2997 15.5201 16.8276 13.78 16.8276 12C16.8276 10.22 16.2997 8.47992 15.3108 6.99988C15.1234 6.71936 14.921 6.45056 14.7048 6.19452C15.564 5.9773 16.4644 5.95264 17.3407 6.12695C18.5023 6.35803 19.5693 6.92835 20.4067 7.76575L22.5364 5.63605C21.2778 4.37738 19.6741 3.5202 17.9283 3.17291C16.1825 2.82568 14.3729 3.00391 12.7283 3.68506C12.4799 3.78796 12.2369 3.90167 12.0001 4.02564C11.7632 3.90167 11.5201 3.78796 11.2717 3.68506C9.6272 3.00391 7.81757 2.82568 6.07178 3.17291ZM12.0001 7.7049C11.6994 7.99695 11.4288 8.32117 11.1935 8.67316C10.5356 9.6579 10.1844 10.8157 10.1844 12C10.1844 13.1843 10.5356 14.3421 11.1935 15.3268C11.4288 15.6788 11.6994 16.0031 12.0001 16.2951C12.3007 16.0031 12.5713 15.6788 12.8065 15.3268C13.4645 14.3421 13.8157 13.1843 13.8157 12C13.8157 10.8157 13.4645 9.6579 12.8065 8.67316C12.5713 8.32117 12.3007 7.99695 12.0001 7.7049Z"
12    fill="currentColor"
13  />
14</svg>
1import React from 'react'
2import styled from 'styled-components'
3
4const StyledChanel = styled.i`
5  & {
6    box-sizing: border-box;
7    position: relative;
8    display: block;
9    transform: scale(var(--ggs, 1));
10    width: 21px;
11    height: 18px;
12  }
13  &::after,
14  &::before {
15    content: '';
16    display: block;
17    position: absolute;
18    box-sizing: border-box;
19    border: 3px solid;
20    width: 18px;
21    height: 18px;
22    border-radius: 22px;
23  }
24  &::before {
25    border-left-color: transparent;
26    left: -3px;
27  }
28  &::after {
29    border-right-color: transparent;
30    right: -3px;
31  }
32`
33
34export const Chanel = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
35  (props, ref) => {
36    return (
37      <>
38        <StyledChanel {...props} ref={ref} icon-role="chanel" />
39      </>
40    )
41  },
42)
43
SimilarView all - 704 icons
Chanel became a 100% CSS icon built by applying features such as: transform, width, height, border, border-radius,
Fun to know, it has: 30 Lines of code at 550b & 398b after compiling. Quite 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