trello logo

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

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

The same logo in other sets

trelloBootstrap Icons trelloBoxicons Brands trelloDevicon trelloFont Awesome 6 Brands trelloFont Awesome Brands trelloFeather Icons trellocss.gg trelloHuge Icons trelloIconoir trelloJam Icons trelloLine Awesome trelloSVG Logos trelloLucide trelloMaterial Design Icons trelloMyna UI Icons trello-fillRemix Icon trelloSimple Icons

Use the trello logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 0H4C1.792 0 0 1.792 0 4v24c0 2.208 1.792 4 4 4h24c2.208 0 4-1.792 4-4V4c0-2.208-1.792-4-4-4M13.922 24.24A1.92 1.92 0 0 1 12 26.162H6.078a1.924 1.924 0 0 1-1.917-1.922V6.079c0-1.057.859-1.917 1.917-1.917H12c1.063 0 1.922.859 1.922 1.917zm13.917-8a1.923 1.923 0 0 1-1.917 1.922H20a1.924 1.924 0 0 1-1.922-1.922V6.079c0-1.057.865-1.917 1.922-1.917h5.922c1.057 0 1.917.859 1.917 1.917z"/></svg>

React

import type { SVGProps } from "react";

export function CibTrello(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="M28 0H4C1.792 0 0 1.792 0 4v24c0 2.208 1.792 4 4 4h24c2.208 0 4-1.792 4-4V4c0-2.208-1.792-4-4-4M13.922 24.24A1.92 1.92 0 0 1 12 26.162H6.078a1.924 1.924 0 0 1-1.917-1.922V6.079c0-1.057.859-1.917 1.917-1.917H12c1.063 0 1.922.859 1.922 1.917zm13.917-8a1.923 1.923 0 0 1-1.917 1.922H20a1.924 1.924 0 0 1-1.922-1.922V6.079c0-1.057.865-1.917 1.922-1.917h5.922c1.057 0 1.917.859 1.917 1.917z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 0H4C1.792 0 0 1.792 0 4v24c0 2.208 1.792 4 4 4h24c2.208 0 4-1.792 4-4V4c0-2.208-1.792-4-4-4M13.922 24.24A1.92 1.92 0 0 1 12 26.162H6.078a1.924 1.924 0 0 1-1.917-1.922V6.079c0-1.057.859-1.917 1.917-1.917H12c1.063 0 1.922.859 1.922 1.917zm13.917-8a1.923 1.923 0 0 1-1.917 1.922H20a1.924 1.924 0 0 1-1.922-1.922V6.079c0-1.057.865-1.917 1.922-1.917h5.922c1.057 0 1.917.859 1.917 1.917z"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%200H4C1.792%200%200%201.792%200%204v24c0%202.208%201.792%204%204%204h24c2.208%200%204-1.792%204-4V4c0-2.208-1.792-4-4-4M13.922%2024.24A1.92%201.92%200%200%201%2012%2026.162H6.078a1.924%201.924%200%200%201-1.917-1.922V6.079c0-1.057.859-1.917%201.917-1.917H12c1.063%200%201.922.859%201.922%201.917zm13.917-8a1.923%201.923%200%200%201-1.917%201.922H20a1.924%201.924%200%200%201-1.922-1.922V6.079c0-1.057.865-1.917%201.922-1.917h5.922c1.057%200%201.917.859%201.917%201.917z%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%22M28%200H4C1.792%200%200%201.792%200%204v24c0%202.208%201.792%204%204%204h24c2.208%200%204-1.792%204-4V4c0-2.208-1.792-4-4-4M13.922%2024.24A1.92%201.92%200%200%201%2012%2026.162H6.078a1.924%201.924%200%200%201-1.917-1.922V6.079c0-1.057.859-1.917%201.917-1.917H12c1.063%200%201.922.859%201.922%201.917zm13.917-8a1.923%201.923%200%200%201-1.917%201.922H20a1.924%201.924%200%200%201-1.922-1.922V6.079c0-1.057.865-1.917%201.922-1.917h5.922c1.057%200%201.917.859%201.917%201.917z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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