component logo
component from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- component
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×257
- License
- CC0
The same logo in other sets
Use the component logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 257"><path d="M214.57 131.72c0 17.483-5.186 33.736-14.018 47.405l29.51 26.24c16.16-21.421 25.859-47.992 25.859-76.896c0-28.742-9.593-55.181-25.597-76.546l-32.262 28.78c10.342 14.374 16.509 31.956 16.509 51.018" fill="#7A797A"/><path d="M196.102 185.36c-16.016 20.579-40.95 33.873-69.044 33.873c-48.334 0-87.512-39.184-87.512-87.512c0-48.335 39.178-87.513 87.512-87.513c26.527 0 50.245 11.847 66.292 30.49l32.28-28.792C202.164 18.169 167.142.518 127.97.518C57.303.518.018 57.802.018 128.468c0 70.667 57.285 127.952 127.952 127.952c39.022 0 73.9-17.52 97.367-45.064l-29.235-25.996" fill="#343334"/><path d="M162.491 132.626c0 19.623-15.91 35.533-35.533 35.533c-19.63 0-35.533-15.91-35.533-35.533c0-19.63 15.904-35.533 35.533-35.533c19.624 0 35.533 15.903 35.533 35.533" fill="#474547"/></svg>
React
import type { SVGProps } from "react";
export function LogosComponent(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 257"><path d="M214.57 131.72c0 17.483-5.186 33.736-14.018 47.405l29.51 26.24c16.16-21.421 25.859-47.992 25.859-76.896c0-28.742-9.593-55.181-25.597-76.546l-32.262 28.78c10.342 14.374 16.509 31.956 16.509 51.018" fill="#7A797A"/><path d="M196.102 185.36c-16.016 20.579-40.95 33.873-69.044 33.873c-48.334 0-87.512-39.184-87.512-87.512c0-48.335 39.178-87.513 87.512-87.513c26.527 0 50.245 11.847 66.292 30.49l32.28-28.792C202.164 18.169 167.142.518 127.97.518C57.303.518.018 57.802.018 128.468c0 70.667 57.285 127.952 127.952 127.952c39.022 0 73.9-17.52 97.367-45.064l-29.235-25.996" fill="#343334"/><path d="M162.491 132.626c0 19.623-15.91 35.533-35.533 35.533c-19.63 0-35.533-15.91-35.533-35.533c0-19.63 15.904-35.533 35.533-35.533c19.624 0 35.533 15.903 35.533 35.533" fill="#474547"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 257"><path d="M214.57 131.72c0 17.483-5.186 33.736-14.018 47.405l29.51 26.24c16.16-21.421 25.859-47.992 25.859-76.896c0-28.742-9.593-55.181-25.597-76.546l-32.262 28.78c10.342 14.374 16.509 31.956 16.509 51.018" fill="#7A797A"/><path d="M196.102 185.36c-16.016 20.579-40.95 33.873-69.044 33.873c-48.334 0-87.512-39.184-87.512-87.512c0-48.335 39.178-87.513 87.512-87.513c26.527 0 50.245 11.847 66.292 30.49l32.28-28.792C202.164 18.169 167.142.518 127.97.518C57.303.518.018 57.802.018 128.468c0 70.667 57.285 127.952 127.952 127.952c39.022 0 73.9-17.52 97.367-45.064l-29.235-25.996" fill="#343334"/><path d="M162.491 132.626c0 19.623-15.91 35.533-35.533 35.533c-19.63 0-35.533-15.91-35.533-35.533c0-19.63 15.904-35.533 35.533-35.533c19.624 0 35.533 15.903 35.533 35.533" fill="#474547"/></svg> </template>
CSS
.icon-component {
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%20256%20257%22%3E%3Cpath%20d%3D%22M214.57%20131.72c0%2017.483-5.186%2033.736-14.018%2047.405l29.51%2026.24c16.16-21.421%2025.859-47.992%2025.859-76.896c0-28.742-9.593-55.181-25.597-76.546l-32.262%2028.78c10.342%2014.374%2016.509%2031.956%2016.509%2051.018%22%20fill%3D%22%237A797A%22%2F%3E%3Cpath%20d%3D%22M196.102%20185.36c-16.016%2020.579-40.95%2033.873-69.044%2033.873c-48.334%200-87.512-39.184-87.512-87.512c0-48.335%2039.178-87.513%2087.512-87.513c26.527%200%2050.245%2011.847%2066.292%2030.49l32.28-28.792C202.164%2018.169%20167.142.518%20127.97.518C57.303.518.018%2057.802.018%20128.468c0%2070.667%2057.285%20127.952%20127.952%20127.952c39.022%200%2073.9-17.52%2097.367-45.064l-29.235-25.996%22%20fill%3D%22%23343334%22%2F%3E%3Cpath%20d%3D%22M162.491%20132.626c0%2019.623-15.91%2035.533-35.533%2035.533c-19.63%200-35.533-15.91-35.533-35.533c0-19.63%2015.904-35.533%2035.533-35.533c19.624%200%2035.533%2015.903%2035.533%2035.533%22%20fill%3D%22%23474547%22%2F%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%20256%20257%22%3E%3Cpath%20d%3D%22M214.57%20131.72c0%2017.483-5.186%2033.736-14.018%2047.405l29.51%2026.24c16.16-21.421%2025.859-47.992%2025.859-76.896c0-28.742-9.593-55.181-25.597-76.546l-32.262%2028.78c10.342%2014.374%2016.509%2031.956%2016.509%2051.018%22%20fill%3D%22%237A797A%22%2F%3E%3Cpath%20d%3D%22M196.102%20185.36c-16.016%2020.579-40.95%2033.873-69.044%2033.873c-48.334%200-87.512-39.184-87.512-87.512c0-48.335%2039.178-87.513%2087.512-87.513c26.527%200%2050.245%2011.847%2066.292%2030.49l32.28-28.792C202.164%2018.169%20167.142.518%20127.97.518C57.303.518.018%2057.802.018%20128.468c0%2070.667%2057.285%20127.952%20127.952%20127.952c39.022%200%2073.9-17.52%2097.367-45.064l-29.235-25.996%22%20fill%3D%22%23343334%22%2F%3E%3Cpath%20d%3D%22M162.491%20132.626c0%2019.623-15.91%2035.533-35.533%2035.533c-19.63%200-35.533-15.91-35.533-35.533c0-19.63%2015.904-35.533%2035.533-35.533c19.624%200%2035.533%2015.903%2035.533%2035.533%22%20fill%3D%22%23474547%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/component.svg?color=%231a73e8&size=48
