heroku logo

heroku from Devicon by konpa · Original · MIT Free for personal and commercial use.

Name: heroku
Set: Devicon
Style: Original
Viewbox: 128×128
License: MIT

1 other variant in Devicon

The same logo in other sets

herokuBoxicons Brands herokuCatppuccin Icons herokuSVG Logos herokuSimple Icons herokuSkill Icons

Use the heroku logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#6762a6" d="M114 13.9C114 7.3 108.7 2 102.1 2H25.9C19.3 2 14 7.3 14 13.9v100.3c0 6.6 5.3 11.9 11.9 11.9h76.3c6.6 0 11.9-5.3 11.9-11.9V13.9zm-4 .1v99.3c0 4.7-3.5 8.7-8.2 8.7H26.5c-4.7 0-8.5-4-8.5-8.7V14c0-4.7 3.9-8 8.5-8h75.2c4.7 0 8.4 3.6 8.4 8.3zm-73 94.7l14.1-14.1L37 80.5zm14-60.9V18.4l-13.9.1s.1 45.9.2 45.7C80.1 47.5 77 59.4 77 59.4v49.4l-.1.2H90V59.5c0-27.1-39-11.7-39-11.7M70 36h14.8c8-10 10.7-17 10.7-17H80.2S75.3 30 70 36"/></svg>

React

import type { SVGProps } from "react";

export function DeviconHeroku(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#6762a6" d="M114 13.9C114 7.3 108.7 2 102.1 2H25.9C19.3 2 14 7.3 14 13.9v100.3c0 6.6 5.3 11.9 11.9 11.9h76.3c6.6 0 11.9-5.3 11.9-11.9V13.9zm-4 .1v99.3c0 4.7-3.5 8.7-8.2 8.7H26.5c-4.7 0-8.5-4-8.5-8.7V14c0-4.7 3.9-8 8.5-8h75.2c4.7 0 8.4 3.6 8.4 8.3zm-73 94.7l14.1-14.1L37 80.5zm14-60.9V18.4l-13.9.1s.1 45.9.2 45.7C80.1 47.5 77 59.4 77 59.4v49.4l-.1.2H90V59.5c0-27.1-39-11.7-39-11.7M70 36h14.8c8-10 10.7-17 10.7-17H80.2S75.3 30 70 36"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#6762a6" d="M114 13.9C114 7.3 108.7 2 102.1 2H25.9C19.3 2 14 7.3 14 13.9v100.3c0 6.6 5.3 11.9 11.9 11.9h76.3c6.6 0 11.9-5.3 11.9-11.9V13.9zm-4 .1v99.3c0 4.7-3.5 8.7-8.2 8.7H26.5c-4.7 0-8.5-4-8.5-8.7V14c0-4.7 3.9-8 8.5-8h75.2c4.7 0 8.4 3.6 8.4 8.3zm-73 94.7l14.1-14.1L37 80.5zm14-60.9V18.4l-13.9.1s.1 45.9.2 45.7C80.1 47.5 77 59.4 77 59.4v49.4l-.1.2H90V59.5c0-27.1-39-11.7-39-11.7M70 36h14.8c8-10 10.7-17 10.7-17H80.2S75.3 30 70 36"/></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%20128%20128%22%3E%3Cpath%20fill%3D%22%236762a6%22%20d%3D%22M114%2013.9C114%207.3%20108.7%202%20102.1%202H25.9C19.3%202%2014%207.3%2014%2013.9v100.3c0%206.6%205.3%2011.9%2011.9%2011.9h76.3c6.6%200%2011.9-5.3%2011.9-11.9V13.9zm-4%20.1v99.3c0%204.7-3.5%208.7-8.2%208.7H26.5c-4.7%200-8.5-4-8.5-8.7V14c0-4.7%203.9-8%208.5-8h75.2c4.7%200%208.4%203.6%208.4%208.3zm-73%2094.7l14.1-14.1L37%2080.5zm14-60.9V18.4l-13.9.1s.1%2045.9.2%2045.7C80.1%2047.5%2077%2059.4%2077%2059.4v49.4l-.1.2H90V59.5c0-27.1-39-11.7-39-11.7M70%2036h14.8c8-10%2010.7-17%2010.7-17H80.2S75.3%2030%2070%2036%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%20128%20128%22%3E%3Cpath%20fill%3D%22%236762a6%22%20d%3D%22M114%2013.9C114%207.3%20108.7%202%20102.1%202H25.9C19.3%202%2014%207.3%2014%2013.9v100.3c0%206.6%205.3%2011.9%2011.9%2011.9h76.3c6.6%200%2011.9-5.3%2011.9-11.9V13.9zm-4%20.1v99.3c0%204.7-3.5%208.7-8.2%208.7H26.5c-4.7%200-8.5-4-8.5-8.7V14c0-4.7%203.9-8%208.5-8h75.2c4.7%200%208.4%203.6%208.4%208.3zm-73%2094.7l14.1-14.1L37%2080.5zm14-60.9V18.4l-13.9.1s.1%2045.9.2%2045.7C80.1%2047.5%2077%2059.4%2077%2059.4v49.4l-.1.2H90V59.5c0-27.1-39-11.7-39-11.7M70%2036h14.8c8-10%2010.7-17%2010.7-17H80.2S75.3%2030%2070%2036%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/heroku.svg?color=%231a73e8&size=48