heroku icon logo
heroku-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- heroku-icon
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×285
- License
- CC0
Related icons in SVG Logos
Use the heroku icon logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 285"><path fill="#430098" d="M230.4 0c13.996 0 25.37 11.232 25.597 25.177l.003.423v233.244c0 13.996-11.235 25.37-25.177 25.597l-.423.003H25.6c-13.996 0-25.37-11.235-25.597-25.176L0 258.844V25.6C0 11.601 11.235.23 25.177.003L25.6 0zm0 14.222H25.6c-6.174 0-11.218 4.948-11.374 11.085l-.004.293v233.244c0 6.174 4.948 11.218 11.085 11.374l.293.004h204.8c6.177 0 11.218-4.947 11.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64 184.89l32 28.444l-32 28.445zM92.444 42.667v80.75c14.201-4.622 34.052-9.64 53.334-9.64c17.582 0 28.106 6.913 33.838 12.712c12.109 12.25 12.397 27.82 12.381 29.897v.058l.003 85.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614c-28.632 0-60.714 14.257-61.666 14.683l-.02.009L64 166.016V42.666zm99.556 0c-1.92 16.156-8.47 31.644-21.333 46.222h-28.445c11.179-14.667 18.198-30.101 21.334-46.222Z"/></svg>
React
import type { SVGProps } from "react";
export function LogosHerokuIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 285"><path fill="#430098" d="M230.4 0c13.996 0 25.37 11.232 25.597 25.177l.003.423v233.244c0 13.996-11.235 25.37-25.177 25.597l-.423.003H25.6c-13.996 0-25.37-11.235-25.597-25.176L0 258.844V25.6C0 11.601 11.235.23 25.177.003L25.6 0zm0 14.222H25.6c-6.174 0-11.218 4.948-11.374 11.085l-.004.293v233.244c0 6.174 4.948 11.218 11.085 11.374l.293.004h204.8c6.177 0 11.218-4.947 11.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64 184.89l32 28.444l-32 28.445zM92.444 42.667v80.75c14.201-4.622 34.052-9.64 53.334-9.64c17.582 0 28.106 6.913 33.838 12.712c12.109 12.25 12.397 27.82 12.381 29.897v.058l.003 85.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614c-28.632 0-60.714 14.257-61.666 14.683l-.02.009L64 166.016V42.666zm99.556 0c-1.92 16.156-8.47 31.644-21.333 46.222h-28.445c11.179-14.667 18.198-30.101 21.334-46.222Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 285"><path fill="#430098" d="M230.4 0c13.996 0 25.37 11.232 25.597 25.177l.003.423v233.244c0 13.996-11.235 25.37-25.177 25.597l-.423.003H25.6c-13.996 0-25.37-11.235-25.597-25.176L0 258.844V25.6C0 11.601 11.235.23 25.177.003L25.6 0zm0 14.222H25.6c-6.174 0-11.218 4.948-11.374 11.085l-.004.293v233.244c0 6.174 4.948 11.218 11.085 11.374l.293.004h204.8c6.177 0 11.218-4.947 11.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64 184.89l32 28.444l-32 28.445zM92.444 42.667v80.75c14.201-4.622 34.052-9.64 53.334-9.64c17.582 0 28.106 6.913 33.838 12.712c12.109 12.25 12.397 27.82 12.381 29.897v.058l.003 85.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614c-28.632 0-60.714 14.257-61.666 14.683l-.02.009L64 166.016V42.666zm99.556 0c-1.92 16.156-8.47 31.644-21.333 46.222h-28.445c11.179-14.667 18.198-30.101 21.334-46.222Z"/></svg> </template>
CSS
.icon-heroku-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%20285%22%3E%3Cpath%20fill%3D%22%23430098%22%20d%3D%22M230.4%200c13.996%200%2025.37%2011.232%2025.597%2025.177l.003.423v233.244c0%2013.996-11.235%2025.37-25.177%2025.597l-.423.003H25.6c-13.996%200-25.37-11.235-25.597-25.176L0%20258.844V25.6C0%2011.601%2011.235.23%2025.177.003L25.6%200zm0%2014.222H25.6c-6.174%200-11.218%204.948-11.374%2011.085l-.004.293v233.244c0%206.174%204.948%2011.218%2011.085%2011.374l.293.004h204.8c6.177%200%2011.218-4.947%2011.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64%20184.89l32%2028.444l-32%2028.445zM92.444%2042.667v80.75c14.201-4.622%2034.052-9.64%2053.334-9.64c17.582%200%2028.106%206.913%2033.838%2012.712c12.109%2012.25%2012.397%2027.82%2012.381%2029.897v.058l.003%2085.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614c-28.632%200-60.714%2014.257-61.666%2014.683l-.02.009L64%20166.016V42.666zm99.556%200c-1.92%2016.156-8.47%2031.644-21.333%2046.222h-28.445c11.179-14.667%2018.198-30.101%2021.334-46.222Z%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%20285%22%3E%3Cpath%20fill%3D%22%23430098%22%20d%3D%22M230.4%200c13.996%200%2025.37%2011.232%2025.597%2025.177l.003.423v233.244c0%2013.996-11.235%2025.37-25.177%2025.597l-.423.003H25.6c-13.996%200-25.37-11.235-25.597-25.176L0%20258.844V25.6C0%2011.601%2011.235.23%2025.177.003L25.6%200zm0%2014.222H25.6c-6.174%200-11.218%204.948-11.374%2011.085l-.004.293v233.244c0%206.174%204.948%2011.218%2011.085%2011.374l.293.004h204.8c6.177%200%2011.218-4.947%2011.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64%20184.89l32%2028.444l-32%2028.445zM92.444%2042.667v80.75c14.201-4.622%2034.052-9.64%2053.334-9.64c17.582%200%2028.106%206.913%2033.838%2012.712c12.109%2012.25%2012.397%2027.82%2012.381%2029.897v.058l.003%2085.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614c-28.632%200-60.714%2014.257-61.666%2014.683l-.02.009L64%20166.016V42.666zm99.556%200c-1.92%2016.156-8.47%2031.644-21.333%2046.222h-28.445c11.179-14.667%2018.198-30.101%2021.334-46.222Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/heroku-icon.svg?color=%231a73e8&size=48
