heroku logo

heroku from CoreUI Brands by creativeLabs Łukasz Holeczek · Brand · CC0-1.0 Free for personal and commercial use.

Name: heroku
Set: CoreUI Brands
Style: Brand
Viewbox: 32×32
License: CC0 1.0

The same logo in other sets

herokuBoxicons Brands herokuCatppuccin Icons herokuDevicon herokuSVG Logos herokuMaterial Icon Theme herokuSimple Icons herokuSkill Icons

Use the heroku logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27.479 0H4.522a2.867 2.867 0 0 0-2.881 2.88v26.24A2.867 2.867 0 0 0 4.522 32h22.957a2.87 2.87 0 0 0 2.881-2.88V2.88A2.867 2.867 0 0 0 27.479 0m1.281 29.12c0 .719-.563 1.281-1.281 1.281H4.522a1.267 1.267 0 0 1-1.281-1.281V2.88c0-.719.563-1.281 1.281-1.281h22.957c.719 0 1.281.563 1.281 1.281zM8.839 27.197L12.438 24l-3.599-3.197zM21.803 14.24c-.641-.641-1.839-1.437-3.839-1.437c-2.161 0-4.401.557-6 1.119V4.803H8.76V18.64L11 17.599s3.683-1.677 6.88-1.677c1.599 0 2 .881 2 1.677v9.599h3.203v-9.599c.079-.239.079-2-1.28-3.359M17.563 10h3.197c1.437-1.683 2.161-3.36 2.401-5.197h-3.197C19.64 6.64 18.839 8.318 17.563 10"/></svg>

React

import type { SVGProps } from "react";

export function CibHeroku(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27.479 0H4.522a2.867 2.867 0 0 0-2.881 2.88v26.24A2.867 2.867 0 0 0 4.522 32h22.957a2.87 2.87 0 0 0 2.881-2.88V2.88A2.867 2.867 0 0 0 27.479 0m1.281 29.12c0 .719-.563 1.281-1.281 1.281H4.522a1.267 1.267 0 0 1-1.281-1.281V2.88c0-.719.563-1.281 1.281-1.281h22.957c.719 0 1.281.563 1.281 1.281zM8.839 27.197L12.438 24l-3.599-3.197zM21.803 14.24c-.641-.641-1.839-1.437-3.839-1.437c-2.161 0-4.401.557-6 1.119V4.803H8.76V18.64L11 17.599s3.683-1.677 6.88-1.677c1.599 0 2 .881 2 1.677v9.599h3.203v-9.599c.079-.239.079-2-1.28-3.359M17.563 10h3.197c1.437-1.683 2.161-3.36 2.401-5.197h-3.197C19.64 6.64 18.839 8.318 17.563 10"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M27.479 0H4.522a2.867 2.867 0 0 0-2.881 2.88v26.24A2.867 2.867 0 0 0 4.522 32h22.957a2.87 2.87 0 0 0 2.881-2.88V2.88A2.867 2.867 0 0 0 27.479 0m1.281 29.12c0 .719-.563 1.281-1.281 1.281H4.522a1.267 1.267 0 0 1-1.281-1.281V2.88c0-.719.563-1.281 1.281-1.281h22.957c.719 0 1.281.563 1.281 1.281zM8.839 27.197L12.438 24l-3.599-3.197zM21.803 14.24c-.641-.641-1.839-1.437-3.839-1.437c-2.161 0-4.401.557-6 1.119V4.803H8.76V18.64L11 17.599s3.683-1.677 6.88-1.677c1.599 0 2 .881 2 1.677v9.599h3.203v-9.599c.079-.239.079-2-1.28-3.359M17.563 10h3.197c1.437-1.683 2.161-3.36 2.401-5.197h-3.197C19.64 6.64 18.839 8.318 17.563 10"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M27.479%200H4.522a2.867%202.867%200%200%200-2.881%202.88v26.24A2.867%202.867%200%200%200%204.522%2032h22.957a2.87%202.87%200%200%200%202.881-2.88V2.88A2.867%202.867%200%200%200%2027.479%200m1.281%2029.12c0%20.719-.563%201.281-1.281%201.281H4.522a1.267%201.267%200%200%201-1.281-1.281V2.88c0-.719.563-1.281%201.281-1.281h22.957c.719%200%201.281.563%201.281%201.281zM8.839%2027.197L12.438%2024l-3.599-3.197zM21.803%2014.24c-.641-.641-1.839-1.437-3.839-1.437c-2.161%200-4.401.557-6%201.119V4.803H8.76V18.64L11%2017.599s3.683-1.677%206.88-1.677c1.599%200%202%20.881%202%201.677v9.599h3.203v-9.599c.079-.239.079-2-1.28-3.359M17.563%2010h3.197c1.437-1.683%202.161-3.36%202.401-5.197h-3.197C19.64%206.64%2018.839%208.318%2017.563%2010%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M27.479%200H4.522a2.867%202.867%200%200%200-2.881%202.88v26.24A2.867%202.867%200%200%200%204.522%2032h22.957a2.87%202.87%200%200%200%202.881-2.88V2.88A2.867%202.867%200%200%200%2027.479%200m1.281%2029.12c0%20.719-.563%201.281-1.281%201.281H4.522a1.267%201.267%200%200%201-1.281-1.281V2.88c0-.719.563-1.281%201.281-1.281h22.957c.719%200%201.281.563%201.281%201.281zM8.839%2027.197L12.438%2024l-3.599-3.197zM21.803%2014.24c-.641-.641-1.839-1.437-3.839-1.437c-2.161%200-4.401.557-6%201.119V4.803H8.76V18.64L11%2017.599s3.683-1.677%206.88-1.677c1.599%200%202%20.881%202%201.677v9.599h3.203v-9.599c.079-.239.079-2-1.28-3.359M17.563%2010h3.197c1.437-1.683%202.161-3.36%202.401-5.197h-3.197C19.64%206.64%2018.839%208.318%2017.563%2010%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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