codeflicker logo
codeflicker-color from LobeHub AI Icons by LobeHub · Color · MIT Free for personal and commercial use.
- Name
- codeflicker-color
- Set
- LobeHub AI Icons
- Style
- Color
- Viewbox
- 24×24
- License
- MIT
2 other variants in LobeHub AI Icons
Use the codeflicker logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd"><path d="M4.707 6.24V3.5H0v16.977h4.707v-2.74H2.94V6.24h1.766z"/><path fill="#32edda" d="M20.868 3.5h-1.575v2.74h1.775v11.497h-1.775v2.74H24V3.5h-3.132zM13.22 3.5l-.55 3.082H9.623l.541-3.082h3.057zM14.395 8.398l-2.133 12.08H9.213l2.125-12.08h3.057z"/><path fill="url(#svgID12)" d="M14.395 8.398l-2.133 12.08h7.031v-2.741h1.775V8.398h-6.673z"/><path fill="url(#svgID13)" d="M9.622 6.583l1.716 1.816h3.057l-1.724-1.816H9.62z"/><path fill="url(#svgID14)" d="M13.22 3.5h6.073v2.74h1.775v2.158h-6.673L12.67 6.582l.55-3.082z"/><defs><linearGradient id="svgID12" x1="10.505" x2="20.36" y1="13.772" y2="14.838" gradientUnits="userSpaceOnUse"><stop stop-color="#32edda"/><stop offset=".09" stop-color="#48eedd" stop-opacity=".89"/><stop offset=".43" stop-color="#95f5eb" stop-opacity=".51"/><stop offset=".7" stop-color="#cefaf6" stop-opacity=".24"/><stop offset=".9" stop-color="#f1fdfc" stop-opacity=".07"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="svgID13" x1="11.854" x2="12.321" y1="6.258" y2="9.998" gradientUnits="userSpaceOnUse"><stop offset=".01" stop-color="#32edda"/><stop offset=".06" stop-color="#4cefde" stop-opacity=".87"/><stop offset=".15" stop-color="#76f2e6" stop-opacity=".67"/><stop offset=".25" stop-color="#9af6ec" stop-opacity=".49"/><stop offset=".35" stop-color="#b9f8f2" stop-opacity=".34"/><stop offset=".45" stop-color="#d3fbf7" stop-opacity=".21"/><stop offset=".56" stop-color="#e6fcfa" stop-opacity=".12"/><stop offset=".68" stop-color="#f4fefd" stop-opacity=".05"/><stop offset=".82" stop-color="#fcfefe" stop-opacity=".01"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="svgID14" x1="13.112" x2="20.41" y1="2.9" y2="8.873" gradientUnits="userSpaceOnUse"><stop stop-color="#32edda"/><stop offset=".1" stop-color="#5bf0e1" stop-opacity=".8"/><stop offset=".23" stop-color="#86f4e9" stop-opacity=".59"/><stop offset=".35" stop-color="#abf7ef" stop-opacity=".41"/><stop offset=".48" stop-color="#c9faf5" stop-opacity=".26"/><stop offset=".6" stop-color="#e1fcf9" stop-opacity=".15"/><stop offset=".73" stop-color="#f1fdfc" stop-opacity=".06"/><stop offset=".86" stop-color="#fbfefe" stop-opacity=".02"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function LobehubCodeflickerColor(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor" fillRule="evenodd"><path d="M4.707 6.24V3.5H0v16.977h4.707v-2.74H2.94V6.24h1.766z"/><path fill="#32edda" d="M20.868 3.5h-1.575v2.74h1.775v11.497h-1.775v2.74H24V3.5h-3.132zM13.22 3.5l-.55 3.082H9.623l.541-3.082h3.057zM14.395 8.398l-2.133 12.08H9.213l2.125-12.08h3.057z"/><path fill="url(#svgID12)" d="M14.395 8.398l-2.133 12.08h7.031v-2.741h1.775V8.398h-6.673z"/><path fill="url(#svgID13)" d="M9.622 6.583l1.716 1.816h3.057l-1.724-1.816H9.62z"/><path fill="url(#svgID14)" d="M13.22 3.5h6.073v2.74h1.775v2.158h-6.673L12.67 6.582l.55-3.082z"/><defs><linearGradient id="svgID12" x1="10.505" x2="20.36" y1="13.772" y2="14.838" gradientUnits="userSpaceOnUse"><stop stopColor="#32edda"/><stop offset=".09" stopColor="#48eedd" stopOpacity=".89"/><stop offset=".43" stopColor="#95f5eb" stopOpacity=".51"/><stop offset=".7" stopColor="#cefaf6" stopOpacity=".24"/><stop offset=".9" stopColor="#f1fdfc" stopOpacity=".07"/><stop offset="1" stopColor="#fff" stopOpacity="0"/></linearGradient><linearGradient id="svgID13" x1="11.854" x2="12.321" y1="6.258" y2="9.998" gradientUnits="userSpaceOnUse"><stop offset=".01" stopColor="#32edda"/><stop offset=".06" stopColor="#4cefde" stopOpacity=".87"/><stop offset=".15" stopColor="#76f2e6" stopOpacity=".67"/><stop offset=".25" stopColor="#9af6ec" stopOpacity=".49"/><stop offset=".35" stopColor="#b9f8f2" stopOpacity=".34"/><stop offset=".45" stopColor="#d3fbf7" stopOpacity=".21"/><stop offset=".56" stopColor="#e6fcfa" stopOpacity=".12"/><stop offset=".68" stopColor="#f4fefd" stopOpacity=".05"/><stop offset=".82" stopColor="#fcfefe" stopOpacity=".01"/><stop offset="1" stopColor="#fff" stopOpacity="0"/></linearGradient><linearGradient id="svgID14" x1="13.112" x2="20.41" y1="2.9" y2="8.873" gradientUnits="userSpaceOnUse"><stop stopColor="#32edda"/><stop offset=".1" stopColor="#5bf0e1" stopOpacity=".8"/><stop offset=".23" stopColor="#86f4e9" stopOpacity=".59"/><stop offset=".35" stopColor="#abf7ef" stopOpacity=".41"/><stop offset=".48" stopColor="#c9faf5" stopOpacity=".26"/><stop offset=".6" stopColor="#e1fcf9" stopOpacity=".15"/><stop offset=".73" stopColor="#f1fdfc" stopOpacity=".06"/><stop offset=".86" stopColor="#fbfefe" stopOpacity=".02"/><stop offset="1" stopColor="#fff" stopOpacity="0"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd"><path d="M4.707 6.24V3.5H0v16.977h4.707v-2.74H2.94V6.24h1.766z"/><path fill="#32edda" d="M20.868 3.5h-1.575v2.74h1.775v11.497h-1.775v2.74H24V3.5h-3.132zM13.22 3.5l-.55 3.082H9.623l.541-3.082h3.057zM14.395 8.398l-2.133 12.08H9.213l2.125-12.08h3.057z"/><path fill="url(#svgID12)" d="M14.395 8.398l-2.133 12.08h7.031v-2.741h1.775V8.398h-6.673z"/><path fill="url(#svgID13)" d="M9.622 6.583l1.716 1.816h3.057l-1.724-1.816H9.62z"/><path fill="url(#svgID14)" d="M13.22 3.5h6.073v2.74h1.775v2.158h-6.673L12.67 6.582l.55-3.082z"/><defs><linearGradient id="svgID12" x1="10.505" x2="20.36" y1="13.772" y2="14.838" gradientUnits="userSpaceOnUse"><stop stop-color="#32edda"/><stop offset=".09" stop-color="#48eedd" stop-opacity=".89"/><stop offset=".43" stop-color="#95f5eb" stop-opacity=".51"/><stop offset=".7" stop-color="#cefaf6" stop-opacity=".24"/><stop offset=".9" stop-color="#f1fdfc" stop-opacity=".07"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="svgID13" x1="11.854" x2="12.321" y1="6.258" y2="9.998" gradientUnits="userSpaceOnUse"><stop offset=".01" stop-color="#32edda"/><stop offset=".06" stop-color="#4cefde" stop-opacity=".87"/><stop offset=".15" stop-color="#76f2e6" stop-opacity=".67"/><stop offset=".25" stop-color="#9af6ec" stop-opacity=".49"/><stop offset=".35" stop-color="#b9f8f2" stop-opacity=".34"/><stop offset=".45" stop-color="#d3fbf7" stop-opacity=".21"/><stop offset=".56" stop-color="#e6fcfa" stop-opacity=".12"/><stop offset=".68" stop-color="#f4fefd" stop-opacity=".05"/><stop offset=".82" stop-color="#fcfefe" stop-opacity=".01"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="svgID14" x1="13.112" x2="20.41" y1="2.9" y2="8.873" gradientUnits="userSpaceOnUse"><stop stop-color="#32edda"/><stop offset=".1" stop-color="#5bf0e1" stop-opacity=".8"/><stop offset=".23" stop-color="#86f4e9" stop-opacity=".59"/><stop offset=".35" stop-color="#abf7ef" stop-opacity=".41"/><stop offset=".48" stop-color="#c9faf5" stop-opacity=".26"/><stop offset=".6" stop-color="#e1fcf9" stop-opacity=".15"/><stop offset=".73" stop-color="#f1fdfc" stop-opacity=".06"/><stop offset=".86" stop-color="#fbfefe" stop-opacity=".02"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></g></svg> </template>
CSS
.icon-codeflicker-color {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.707%206.24V3.5H0v16.977h4.707v-2.74H2.94V6.24h1.766z%22%2F%3E%3Cpath%20fill%3D%22%2332edda%22%20d%3D%22M20.868%203.5h-1.575v2.74h1.775v11.497h-1.775v2.74H24V3.5h-3.132zM13.22%203.5l-.55%203.082H9.623l.541-3.082h3.057zM14.395%208.398l-2.133%2012.08H9.213l2.125-12.08h3.057z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID12)%22%20d%3D%22M14.395%208.398l-2.133%2012.08h7.031v-2.741h1.775V8.398h-6.673z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID13)%22%20d%3D%22M9.622%206.583l1.716%201.816h3.057l-1.724-1.816H9.62z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID14)%22%20d%3D%22M13.22%203.5h6.073v2.74h1.775v2.158h-6.673L12.67%206.582l.55-3.082z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID12%22%20x1%3D%2210.505%22%20x2%3D%2220.36%22%20y1%3D%2213.772%22%20y2%3D%2214.838%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2332edda%22%2F%3E%3Cstop%20offset%3D%22.09%22%20stop-color%3D%22%2348eedd%22%20stop-opacity%3D%22.89%22%2F%3E%3Cstop%20offset%3D%22.43%22%20stop-color%3D%22%2395f5eb%22%20stop-opacity%3D%22.51%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23cefaf6%22%20stop-opacity%3D%22.24%22%2F%3E%3Cstop%20offset%3D%22.9%22%20stop-color%3D%22%23f1fdfc%22%20stop-opacity%3D%22.07%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID13%22%20x1%3D%2211.854%22%20x2%3D%2212.321%22%20y1%3D%226.258%22%20y2%3D%229.998%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.01%22%20stop-color%3D%22%2332edda%22%2F%3E%3Cstop%20offset%3D%22.06%22%20stop-color%3D%22%234cefde%22%20stop-opacity%3D%22.87%22%2F%3E%3Cstop%20offset%3D%22.15%22%20stop-color%3D%22%2376f2e6%22%20stop-opacity%3D%22.67%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239af6ec%22%20stop-opacity%3D%22.49%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23b9f8f2%22%20stop-opacity%3D%22.34%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23d3fbf7%22%20stop-opacity%3D%22.21%22%2F%3E%3Cstop%20offset%3D%22.56%22%20stop-color%3D%22%23e6fcfa%22%20stop-opacity%3D%22.12%22%2F%3E%3Cstop%20offset%3D%22.68%22%20stop-color%3D%22%23f4fefd%22%20stop-opacity%3D%22.05%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23fcfefe%22%20stop-opacity%3D%22.01%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID14%22%20x1%3D%2213.112%22%20x2%3D%2220.41%22%20y1%3D%222.9%22%20y2%3D%228.873%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2332edda%22%2F%3E%3Cstop%20offset%3D%22.1%22%20stop-color%3D%22%235bf0e1%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%22.23%22%20stop-color%3D%22%2386f4e9%22%20stop-opacity%3D%22.59%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23abf7ef%22%20stop-opacity%3D%22.41%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23c9faf5%22%20stop-opacity%3D%22.26%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23e1fcf9%22%20stop-opacity%3D%22.15%22%2F%3E%3Cstop%20offset%3D%22.73%22%20stop-color%3D%22%23f1fdfc%22%20stop-opacity%3D%22.06%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22%23fbfefe%22%20stop-opacity%3D%22.02%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.707%206.24V3.5H0v16.977h4.707v-2.74H2.94V6.24h1.766z%22%2F%3E%3Cpath%20fill%3D%22%2332edda%22%20d%3D%22M20.868%203.5h-1.575v2.74h1.775v11.497h-1.775v2.74H24V3.5h-3.132zM13.22%203.5l-.55%203.082H9.623l.541-3.082h3.057zM14.395%208.398l-2.133%2012.08H9.213l2.125-12.08h3.057z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID12)%22%20d%3D%22M14.395%208.398l-2.133%2012.08h7.031v-2.741h1.775V8.398h-6.673z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID13)%22%20d%3D%22M9.622%206.583l1.716%201.816h3.057l-1.724-1.816H9.62z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID14)%22%20d%3D%22M13.22%203.5h6.073v2.74h1.775v2.158h-6.673L12.67%206.582l.55-3.082z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID12%22%20x1%3D%2210.505%22%20x2%3D%2220.36%22%20y1%3D%2213.772%22%20y2%3D%2214.838%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2332edda%22%2F%3E%3Cstop%20offset%3D%22.09%22%20stop-color%3D%22%2348eedd%22%20stop-opacity%3D%22.89%22%2F%3E%3Cstop%20offset%3D%22.43%22%20stop-color%3D%22%2395f5eb%22%20stop-opacity%3D%22.51%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23cefaf6%22%20stop-opacity%3D%22.24%22%2F%3E%3Cstop%20offset%3D%22.9%22%20stop-color%3D%22%23f1fdfc%22%20stop-opacity%3D%22.07%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID13%22%20x1%3D%2211.854%22%20x2%3D%2212.321%22%20y1%3D%226.258%22%20y2%3D%229.998%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.01%22%20stop-color%3D%22%2332edda%22%2F%3E%3Cstop%20offset%3D%22.06%22%20stop-color%3D%22%234cefde%22%20stop-opacity%3D%22.87%22%2F%3E%3Cstop%20offset%3D%22.15%22%20stop-color%3D%22%2376f2e6%22%20stop-opacity%3D%22.67%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%239af6ec%22%20stop-opacity%3D%22.49%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23b9f8f2%22%20stop-opacity%3D%22.34%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23d3fbf7%22%20stop-opacity%3D%22.21%22%2F%3E%3Cstop%20offset%3D%22.56%22%20stop-color%3D%22%23e6fcfa%22%20stop-opacity%3D%22.12%22%2F%3E%3Cstop%20offset%3D%22.68%22%20stop-color%3D%22%23f4fefd%22%20stop-opacity%3D%22.05%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23fcfefe%22%20stop-opacity%3D%22.01%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID14%22%20x1%3D%2213.112%22%20x2%3D%2220.41%22%20y1%3D%222.9%22%20y2%3D%228.873%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2332edda%22%2F%3E%3Cstop%20offset%3D%22.1%22%20stop-color%3D%22%235bf0e1%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%22.23%22%20stop-color%3D%22%2386f4e9%22%20stop-opacity%3D%22.59%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23abf7ef%22%20stop-opacity%3D%22.41%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23c9faf5%22%20stop-opacity%3D%22.26%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23e1fcf9%22%20stop-opacity%3D%22.15%22%2F%3E%3Cstop%20offset%3D%22.73%22%20stop-color%3D%22%23f1fdfc%22%20stop-opacity%3D%22.06%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22%23fbfefe%22%20stop-opacity%3D%22.02%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lobehub/codeflicker-color.svg?color=%231a73e8&size=48
