heroku logo
heroku from Skill Icons by tandpfun · Default · MIT Free for personal and commercial use.
- Name
- heroku
- Set
- Skill Icons
- Style
- Default
- Viewbox
- 256×256
- License
- MIT
The same logo in other sets
Use the heroku logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#430098" rx="60"/><path fill="#fff" d="M70 218v-51.429l28.929 25.715zm90 0v-76.789c-.125-6.001-3.015-13.211-16.071-13.211c-26.145 0-55.473 13.15-55.765 13.281L70 149.51V38h25.714v73c12.838-4.179 30.783-8.714 48.215-8.714c15.894 0 25.408 6.248 30.59 11.491c11.06 11.185 11.211 25.434 11.196 27.08V218zm6.429-138.214h-25.715C150.82 66.526 157.165 52.574 160 38h25.714c-1.735 14.606-7.656 28.607-19.285 41.786"/></g></svg>
React
import type { SVGProps } from "react";
export function SkillIconsHeroku(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#430098" rx="60"/><path fill="#fff" d="M70 218v-51.429l28.929 25.715zm90 0v-76.789c-.125-6.001-3.015-13.211-16.071-13.211c-26.145 0-55.473 13.15-55.765 13.281L70 149.51V38h25.714v73c12.838-4.179 30.783-8.714 48.215-8.714c15.894 0 25.408 6.248 30.59 11.491c11.06 11.185 11.211 25.434 11.196 27.08V218zm6.429-138.214h-25.715C150.82 66.526 157.165 52.574 160 38h25.714c-1.735 14.606-7.656 28.607-19.285 41.786"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#430098" rx="60"/><path fill="#fff" d="M70 218v-51.429l28.929 25.715zm90 0v-76.789c-.125-6.001-3.015-13.211-16.071-13.211c-26.145 0-55.473 13.15-55.765 13.281L70 149.51V38h25.714v73c12.838-4.179 30.783-8.714 48.215-8.714c15.894 0 25.408 6.248 30.59 11.491c11.06 11.185 11.211 25.434 11.196 27.08V218zm6.429-138.214h-25.715C150.82 66.526 157.165 52.574 160 38h25.714c-1.735 14.606-7.656 28.607-19.285 41.786"/></g></svg> </template>
CSS
.icon-heroku {
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%20256%22%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23430098%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M70%20218v-51.429l28.929%2025.715zm90%200v-76.789c-.125-6.001-3.015-13.211-16.071-13.211c-26.145%200-55.473%2013.15-55.765%2013.281L70%20149.51V38h25.714v73c12.838-4.179%2030.783-8.714%2048.215-8.714c15.894%200%2025.408%206.248%2030.59%2011.491c11.06%2011.185%2011.211%2025.434%2011.196%2027.08V218zm6.429-138.214h-25.715C150.82%2066.526%20157.165%2052.574%20160%2038h25.714c-1.735%2014.606-7.656%2028.607-19.285%2041.786%22%2F%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%20256%20256%22%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23430098%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M70%20218v-51.429l28.929%2025.715zm90%200v-76.789c-.125-6.001-3.015-13.211-16.071-13.211c-26.145%200-55.473%2013.15-55.765%2013.281L70%20149.51V38h25.714v73c12.838-4.179%2030.783-8.714%2048.215-8.714c15.894%200%2025.408%206.248%2030.59%2011.491c11.06%2011.185%2011.211%2025.434%2011.196%2027.08V218zm6.429-138.214h-25.715C150.82%2066.526%20157.165%2052.574%20160%2038h25.714c-1.735%2014.606-7.656%2028.607-19.285%2041.786%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/skill-icons/heroku.svg?color=%231a73e8&size=48
