cloudflare icon logo
cloudflare-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- cloudflare-icon
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×117
- License
- CC0
Related icons in SVG Logos
Use the cloudflare icon logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 117"><path fill="#fbad41" d="M205.52 50.813c-.858 0-1.705.03-2.551.058q-.207.012-.398.094a1.42 1.42 0 0 0-.92.994l-3.628 12.672c-1.565 5.449-.983 10.48 1.646 14.174c2.41 3.416 6.42 5.421 11.289 5.655l19.679 1.194c.585.03 1.092.312 1.4.776a1.92 1.92 0 0 1 .2 1.692a2.5 2.5 0 0 1-2.134 1.662l-20.448 1.193c-11.11.515-23.062 9.58-27.255 20.633l-1.474 3.9a1.092 1.092 0 0 0 .967 1.49h70.425a1.87 1.87 0 0 0 1.81-1.365A51.2 51.2 0 0 0 256 101.828c0-28.16-22.582-50.984-50.449-50.984"/><path fill="#f6821f" d="m174.782 115.362l1.303-4.583c1.568-5.449.987-10.48-1.639-14.173c-2.418-3.417-6.424-5.422-11.296-5.656l-92.312-1.193a1.82 1.82 0 0 1-1.459-.776a1.92 1.92 0 0 1-.203-1.693a2.5 2.5 0 0 1 2.154-1.662l93.173-1.193c11.063-.511 23.015-9.58 27.208-20.633l5.313-14.04c.214-.596.27-1.238.156-1.86C191.126 20.51 166.91 0 137.96 0C111.269 0 88.626 17.403 80.5 41.596a27 27 0 0 0-19.156-5.359C48.549 37.524 38.25 47.946 36.979 60.88a27.9 27.9 0 0 0 .702 9.642C16.773 71.145 0 88.454 0 109.726c0 1.923.137 3.818.413 5.667c.115.897.879 1.57 1.783 1.568h170.48a2.22 2.22 0 0 0 2.106-1.63"/></svg>
React
import type { SVGProps } from "react";
export function LogosCloudflareIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 117"><path fill="#fbad41" d="M205.52 50.813c-.858 0-1.705.03-2.551.058q-.207.012-.398.094a1.42 1.42 0 0 0-.92.994l-3.628 12.672c-1.565 5.449-.983 10.48 1.646 14.174c2.41 3.416 6.42 5.421 11.289 5.655l19.679 1.194c.585.03 1.092.312 1.4.776a1.92 1.92 0 0 1 .2 1.692a2.5 2.5 0 0 1-2.134 1.662l-20.448 1.193c-11.11.515-23.062 9.58-27.255 20.633l-1.474 3.9a1.092 1.092 0 0 0 .967 1.49h70.425a1.87 1.87 0 0 0 1.81-1.365A51.2 51.2 0 0 0 256 101.828c0-28.16-22.582-50.984-50.449-50.984"/><path fill="#f6821f" d="m174.782 115.362l1.303-4.583c1.568-5.449.987-10.48-1.639-14.173c-2.418-3.417-6.424-5.422-11.296-5.656l-92.312-1.193a1.82 1.82 0 0 1-1.459-.776a1.92 1.92 0 0 1-.203-1.693a2.5 2.5 0 0 1 2.154-1.662l93.173-1.193c11.063-.511 23.015-9.58 27.208-20.633l5.313-14.04c.214-.596.27-1.238.156-1.86C191.126 20.51 166.91 0 137.96 0C111.269 0 88.626 17.403 80.5 41.596a27 27 0 0 0-19.156-5.359C48.549 37.524 38.25 47.946 36.979 60.88a27.9 27.9 0 0 0 .702 9.642C16.773 71.145 0 88.454 0 109.726c0 1.923.137 3.818.413 5.667c.115.897.879 1.57 1.783 1.568h170.48a2.22 2.22 0 0 0 2.106-1.63"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 117"><path fill="#fbad41" d="M205.52 50.813c-.858 0-1.705.03-2.551.058q-.207.012-.398.094a1.42 1.42 0 0 0-.92.994l-3.628 12.672c-1.565 5.449-.983 10.48 1.646 14.174c2.41 3.416 6.42 5.421 11.289 5.655l19.679 1.194c.585.03 1.092.312 1.4.776a1.92 1.92 0 0 1 .2 1.692a2.5 2.5 0 0 1-2.134 1.662l-20.448 1.193c-11.11.515-23.062 9.58-27.255 20.633l-1.474 3.9a1.092 1.092 0 0 0 .967 1.49h70.425a1.87 1.87 0 0 0 1.81-1.365A51.2 51.2 0 0 0 256 101.828c0-28.16-22.582-50.984-50.449-50.984"/><path fill="#f6821f" d="m174.782 115.362l1.303-4.583c1.568-5.449.987-10.48-1.639-14.173c-2.418-3.417-6.424-5.422-11.296-5.656l-92.312-1.193a1.82 1.82 0 0 1-1.459-.776a1.92 1.92 0 0 1-.203-1.693a2.5 2.5 0 0 1 2.154-1.662l93.173-1.193c11.063-.511 23.015-9.58 27.208-20.633l5.313-14.04c.214-.596.27-1.238.156-1.86C191.126 20.51 166.91 0 137.96 0C111.269 0 88.626 17.403 80.5 41.596a27 27 0 0 0-19.156-5.359C48.549 37.524 38.25 47.946 36.979 60.88a27.9 27.9 0 0 0 .702 9.642C16.773 71.145 0 88.454 0 109.726c0 1.923.137 3.818.413 5.667c.115.897.879 1.57 1.783 1.568h170.48a2.22 2.22 0 0 0 2.106-1.63"/></svg> </template>
CSS
.icon-cloudflare-icon {
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%20117%22%3E%3Cpath%20fill%3D%22%23fbad41%22%20d%3D%22M205.52%2050.813c-.858%200-1.705.03-2.551.058q-.207.012-.398.094a1.42%201.42%200%200%200-.92.994l-3.628%2012.672c-1.565%205.449-.983%2010.48%201.646%2014.174c2.41%203.416%206.42%205.421%2011.289%205.655l19.679%201.194c.585.03%201.092.312%201.4.776a1.92%201.92%200%200%201%20.2%201.692a2.5%202.5%200%200%201-2.134%201.662l-20.448%201.193c-11.11.515-23.062%209.58-27.255%2020.633l-1.474%203.9a1.092%201.092%200%200%200%20.967%201.49h70.425a1.87%201.87%200%200%200%201.81-1.365A51.2%2051.2%200%200%200%20256%20101.828c0-28.16-22.582-50.984-50.449-50.984%22%2F%3E%3Cpath%20fill%3D%22%23f6821f%22%20d%3D%22m174.782%20115.362l1.303-4.583c1.568-5.449.987-10.48-1.639-14.173c-2.418-3.417-6.424-5.422-11.296-5.656l-92.312-1.193a1.82%201.82%200%200%201-1.459-.776a1.92%201.92%200%200%201-.203-1.693a2.5%202.5%200%200%201%202.154-1.662l93.173-1.193c11.063-.511%2023.015-9.58%2027.208-20.633l5.313-14.04c.214-.596.27-1.238.156-1.86C191.126%2020.51%20166.91%200%20137.96%200C111.269%200%2088.626%2017.403%2080.5%2041.596a27%2027%200%200%200-19.156-5.359C48.549%2037.524%2038.25%2047.946%2036.979%2060.88a27.9%2027.9%200%200%200%20.702%209.642C16.773%2071.145%200%2088.454%200%20109.726c0%201.923.137%203.818.413%205.667c.115.897.879%201.57%201.783%201.568h170.48a2.22%202.22%200%200%200%202.106-1.63%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%20117%22%3E%3Cpath%20fill%3D%22%23fbad41%22%20d%3D%22M205.52%2050.813c-.858%200-1.705.03-2.551.058q-.207.012-.398.094a1.42%201.42%200%200%200-.92.994l-3.628%2012.672c-1.565%205.449-.983%2010.48%201.646%2014.174c2.41%203.416%206.42%205.421%2011.289%205.655l19.679%201.194c.585.03%201.092.312%201.4.776a1.92%201.92%200%200%201%20.2%201.692a2.5%202.5%200%200%201-2.134%201.662l-20.448%201.193c-11.11.515-23.062%209.58-27.255%2020.633l-1.474%203.9a1.092%201.092%200%200%200%20.967%201.49h70.425a1.87%201.87%200%200%200%201.81-1.365A51.2%2051.2%200%200%200%20256%20101.828c0-28.16-22.582-50.984-50.449-50.984%22%2F%3E%3Cpath%20fill%3D%22%23f6821f%22%20d%3D%22m174.782%20115.362l1.303-4.583c1.568-5.449.987-10.48-1.639-14.173c-2.418-3.417-6.424-5.422-11.296-5.656l-92.312-1.193a1.82%201.82%200%200%201-1.459-.776a1.92%201.92%200%200%201-.203-1.693a2.5%202.5%200%200%201%202.154-1.662l93.173-1.193c11.063-.511%2023.015-9.58%2027.208-20.633l5.313-14.04c.214-.596.27-1.238.156-1.86C191.126%2020.51%20166.91%200%20137.96%200C111.269%200%2088.626%2017.403%2080.5%2041.596a27%2027%200%200%200-19.156-5.359C48.549%2037.524%2038.25%2047.946%2036.979%2060.88a27.9%2027.9%200%200%200%20.702%209.642C16.773%2071.145%200%2088.454%200%20109.726c0%201.923.137%203.818.413%205.667c.115.897.879%201.57%201.783%201.568h170.48a2.22%202.22%200%200%200%202.106-1.63%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/cloudflare-icon.svg?color=%231a73e8&size=48
