heroku logo

heroku from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.

Name: heroku
Set: Simple Icons
Style: Brand
Viewbox: 24×24
License: CC0 1.0

The same logo in other sets

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

Use the heroku logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.61 0H3.39a2.15 2.15 0 0 0-2.16 2.16v19.681A2.15 2.15 0 0 0 3.39 24h17.22a2.15 2.15 0 0 0 2.159-2.159V2.16A2.15 2.15 0 0 0 20.61 0m.96 21.841c0 .539-.421.96-.96.96H3.39a.95.95 0 0 1-.96-.96V2.16c0-.54.42-.961.96-.961h17.22a.95.95 0 0 1 .96.961zM6.63 20.399L9.33 18l-2.7-2.4zm9.72-9.719c-.479-.48-1.379-1.08-2.879-1.08c-1.621 0-3.301.421-4.5.84V3.6h-2.4v10.38l1.68-.78s2.76-1.26 5.16-1.26c1.2 0 1.5.66 1.5 1.26v7.2h2.4v-7.2c.059-.179.059-1.501-.961-2.52M13.17 7.5h2.4c1.08-1.26 1.62-2.521 1.8-3.9h-2.399c-.241 1.379-.841 2.64-1.801 3.9"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsHeroku(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.61 0H3.39a2.15 2.15 0 0 0-2.16 2.16v19.681A2.15 2.15 0 0 0 3.39 24h17.22a2.15 2.15 0 0 0 2.159-2.159V2.16A2.15 2.15 0 0 0 20.61 0m.96 21.841c0 .539-.421.96-.96.96H3.39a.95.95 0 0 1-.96-.96V2.16c0-.54.42-.961.96-.961h17.22a.95.95 0 0 1 .96.961zM6.63 20.399L9.33 18l-2.7-2.4zm9.72-9.719c-.479-.48-1.379-1.08-2.879-1.08c-1.621 0-3.301.421-4.5.84V3.6h-2.4v10.38l1.68-.78s2.76-1.26 5.16-1.26c1.2 0 1.5.66 1.5 1.26v7.2h2.4v-7.2c.059-.179.059-1.501-.961-2.52M13.17 7.5h2.4c1.08-1.26 1.62-2.521 1.8-3.9h-2.399c-.241 1.379-.841 2.64-1.801 3.9"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.61 0H3.39a2.15 2.15 0 0 0-2.16 2.16v19.681A2.15 2.15 0 0 0 3.39 24h17.22a2.15 2.15 0 0 0 2.159-2.159V2.16A2.15 2.15 0 0 0 20.61 0m.96 21.841c0 .539-.421.96-.96.96H3.39a.95.95 0 0 1-.96-.96V2.16c0-.54.42-.961.96-.961h17.22a.95.95 0 0 1 .96.961zM6.63 20.399L9.33 18l-2.7-2.4zm9.72-9.719c-.479-.48-1.379-1.08-2.879-1.08c-1.621 0-3.301.421-4.5.84V3.6h-2.4v10.38l1.68-.78s2.76-1.26 5.16-1.26c1.2 0 1.5.66 1.5 1.26v7.2h2.4v-7.2c.059-.179.059-1.501-.961-2.52M13.17 7.5h2.4c1.08-1.26 1.62-2.521 1.8-3.9h-2.399c-.241 1.379-.841 2.64-1.801 3.9"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.61%200H3.39a2.15%202.15%200%200%200-2.16%202.16v19.681A2.15%202.15%200%200%200%203.39%2024h17.22a2.15%202.15%200%200%200%202.159-2.159V2.16A2.15%202.15%200%200%200%2020.61%200m.96%2021.841c0%20.539-.421.96-.96.96H3.39a.95.95%200%200%201-.96-.96V2.16c0-.54.42-.961.96-.961h17.22a.95.95%200%200%201%20.96.961zM6.63%2020.399L9.33%2018l-2.7-2.4zm9.72-9.719c-.479-.48-1.379-1.08-2.879-1.08c-1.621%200-3.301.421-4.5.84V3.6h-2.4v10.38l1.68-.78s2.76-1.26%205.16-1.26c1.2%200%201.5.66%201.5%201.26v7.2h2.4v-7.2c.059-.179.059-1.501-.961-2.52M13.17%207.5h2.4c1.08-1.26%201.62-2.521%201.8-3.9h-2.399c-.241%201.379-.841%202.64-1.801%203.9%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.61%200H3.39a2.15%202.15%200%200%200-2.16%202.16v19.681A2.15%202.15%200%200%200%203.39%2024h17.22a2.15%202.15%200%200%200%202.159-2.159V2.16A2.15%202.15%200%200%200%2020.61%200m.96%2021.841c0%20.539-.421.96-.96.96H3.39a.95.95%200%200%201-.96-.96V2.16c0-.54.42-.961.96-.961h17.22a.95.95%200%200%201%20.96.961zM6.63%2020.399L9.33%2018l-2.7-2.4zm9.72-9.719c-.479-.48-1.379-1.08-2.879-1.08c-1.621%200-3.301.421-4.5.84V3.6h-2.4v10.38l1.68-.78s2.76-1.26%205.16-1.26c1.2%200%201.5.66%201.5%201.26v7.2h2.4v-7.2c.059-.179.059-1.501-.961-2.52M13.17%207.5h2.4c1.08-1.26%201.62-2.521%201.8-3.9h-2.399c-.241%201.379-.841%202.64-1.801%203.9%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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