trello logo

trello from Font Awesome 6 Brands by Dave Gandy · Regular · CC-BY-4.0 Attribution required.

Name
trello
Set
Font Awesome 6 Brands
Style
Regular
Viewbox
448×512
License
CC BY 4.0

The same logo in other sets

trelloBootstrap IconstrelloBoxicons BrandstrelloCoreUI BrandstrelloDevicontrelloFont Awesome BrandstrelloFeather Iconstrellocss.ggtrelloHuge IconstrelloIconoirtrelloJam IconstrelloLine AwesometrelloSVG LogostrelloLucidetrelloMaterial Design IconstrelloMyna UI Iconstrello-fillRemix IcontrelloSimple Icons

Use the trello logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M392.3 32H56.1C25.1 32 0 57.1 0 88c-.1 0 0-4 0 336c0 30.9 25.1 56 56 56h336.2c30.8-.2 55.7-25.2 55.7-56V88c.1-30.8-24.8-55.8-55.6-56M197 371.3c-.2 14.7-12.1 26.6-26.9 26.6H87.4c-14.8.1-26.9-11.8-27-26.6V117.1c0-14.8 12-26.9 26.9-26.9h82.9c14.8 0 26.9 12 26.9 26.9v254.2zm193.1-112c0 14.8-12 26.9-26.9 26.9h-81c-14.8 0-26.9-12-26.9-26.9V117.2c0-14.8 12-26.9 26.8-26.9h81.1c14.8 0 26.9 12 26.9 26.9z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6BrandsTrello(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M392.3 32H56.1C25.1 32 0 57.1 0 88c-.1 0 0-4 0 336c0 30.9 25.1 56 56 56h336.2c30.8-.2 55.7-25.2 55.7-56V88c.1-30.8-24.8-55.8-55.6-56M197 371.3c-.2 14.7-12.1 26.6-26.9 26.6H87.4c-14.8.1-26.9-11.8-27-26.6V117.1c0-14.8 12-26.9 26.9-26.9h82.9c14.8 0 26.9 12 26.9 26.9v254.2zm193.1-112c0 14.8-12 26.9-26.9 26.9h-81c-14.8 0-26.9-12-26.9-26.9V117.2c0-14.8 12-26.9 26.8-26.9h81.1c14.8 0 26.9 12 26.9 26.9z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M392.3 32H56.1C25.1 32 0 57.1 0 88c-.1 0 0-4 0 336c0 30.9 25.1 56 56 56h336.2c30.8-.2 55.7-25.2 55.7-56V88c.1-30.8-24.8-55.8-55.6-56M197 371.3c-.2 14.7-12.1 26.6-26.9 26.6H87.4c-14.8.1-26.9-11.8-27-26.6V117.1c0-14.8 12-26.9 26.9-26.9h82.9c14.8 0 26.9 12 26.9 26.9v254.2zm193.1-112c0 14.8-12 26.9-26.9 26.9h-81c-14.8 0-26.9-12-26.9-26.9V117.2c0-14.8 12-26.9 26.8-26.9h81.1c14.8 0 26.9 12 26.9 26.9z"/></svg>
</template>

CSS

.icon-trello {
  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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M392.3%2032H56.1C25.1%2032%200%2057.1%200%2088c-.1%200%200-4%200%20336c0%2030.9%2025.1%2056%2056%2056h336.2c30.8-.2%2055.7-25.2%2055.7-56V88c.1-30.8-24.8-55.8-55.6-56M197%20371.3c-.2%2014.7-12.1%2026.6-26.9%2026.6H87.4c-14.8.1-26.9-11.8-27-26.6V117.1c0-14.8%2012-26.9%2026.9-26.9h82.9c14.8%200%2026.9%2012%2026.9%2026.9v254.2zm193.1-112c0%2014.8-12%2026.9-26.9%2026.9h-81c-14.8%200-26.9-12-26.9-26.9V117.2c0-14.8%2012-26.9%2026.8-26.9h81.1c14.8%200%2026.9%2012%2026.9%2026.9z%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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M392.3%2032H56.1C25.1%2032%200%2057.1%200%2088c-.1%200%200-4%200%20336c0%2030.9%2025.1%2056%2056%2056h336.2c30.8-.2%2055.7-25.2%2055.7-56V88c.1-30.8-24.8-55.8-55.6-56M197%20371.3c-.2%2014.7-12.1%2026.6-26.9%2026.6H87.4c-14.8.1-26.9-11.8-27-26.6V117.1c0-14.8%2012-26.9%2026.9-26.9h82.9c14.8%200%2026.9%2012%2026.9%2026.9v254.2zm193.1-112c0%2014.8-12%2026.9-26.9%2026.9h-81c-14.8%200-26.9-12-26.9-26.9V117.2c0-14.8%2012-26.9%2026.8-26.9h81.1c14.8%200%2026.9%2012%2026.9%2026.9z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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