trello logo
trello from Devicon by konpa · Original · MIT Free for personal and commercial use.
- Name
- trello
- Set
- Devicon
- Style
- Original
- Viewbox
- 128×128
- License
- MIT
1 other variant in Devicon
The same logo in other sets
trelloBootstrap IconstrelloBoxicons BrandstrelloCoreUI BrandstrelloFont Awesome 6 BrandstrelloFont 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 128 128"><defs><linearGradient id="SVGIbGPWdSe" x1="128" x2="128" y1="0" y2="256" gradientTransform="scale(.5)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2684ff"/><stop offset="1" stop-color="#0052cc"/></linearGradient></defs><path fill="url(#SVGIbGPWdSe)" d="M12.5 0h103c6.925 0 12.5 5.575 12.5 12.5v103c0 6.925-5.575 12.5-12.5 12.5h-103C5.575 128 0 122.425 0 115.5v-103C0 5.575 5.575 0 12.5 0"/><path fill="#fff" d="M78.32 16.64h27.04c3.324 0 6 2.676 6 6v44c0 3.324-2.676 6-6 6H78.32c-3.324 0-6-2.676-6-6v-44c0-3.324 2.676-6 6-6m-55.68 0h27.04c3.324 0 6 2.676 6 6v76c0 3.324-2.676 6-6 6H22.64c-3.324 0-6-2.676-6-6v-76c0-3.324 2.676-6 6-6"/></svg>
React
import type { SVGProps } from "react";
export function DeviconTrello(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><defs><linearGradient id="SVGIbGPWdSe" x1="128" x2="128" y1="0" y2="256" gradientTransform="scale(.5)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#2684ff"/><stop offset="1" stopColor="#0052cc"/></linearGradient></defs><path fill="url(#SVGIbGPWdSe)" d="M12.5 0h103c6.925 0 12.5 5.575 12.5 12.5v103c0 6.925-5.575 12.5-12.5 12.5h-103C5.575 128 0 122.425 0 115.5v-103C0 5.575 5.575 0 12.5 0"/><path fill="#fff" d="M78.32 16.64h27.04c3.324 0 6 2.676 6 6v44c0 3.324-2.676 6-6 6H78.32c-3.324 0-6-2.676-6-6v-44c0-3.324 2.676-6 6-6m-55.68 0h27.04c3.324 0 6 2.676 6 6v76c0 3.324-2.676 6-6 6H22.64c-3.324 0-6-2.676-6-6v-76c0-3.324 2.676-6 6-6"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><defs><linearGradient id="SVGIbGPWdSe" x1="128" x2="128" y1="0" y2="256" gradientTransform="scale(.5)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2684ff"/><stop offset="1" stop-color="#0052cc"/></linearGradient></defs><path fill="url(#SVGIbGPWdSe)" d="M12.5 0h103c6.925 0 12.5 5.575 12.5 12.5v103c0 6.925-5.575 12.5-12.5 12.5h-103C5.575 128 0 122.425 0 115.5v-103C0 5.575 5.575 0 12.5 0"/><path fill="#fff" d="M78.32 16.64h27.04c3.324 0 6 2.676 6 6v44c0 3.324-2.676 6-6 6H78.32c-3.324 0-6-2.676-6-6v-44c0-3.324 2.676-6 6-6m-55.68 0h27.04c3.324 0 6 2.676 6 6v76c0 3.324-2.676 6-6 6H22.64c-3.324 0-6-2.676-6-6v-76c0-3.324 2.676-6 6-6"/></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%20128%20128%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIbGPWdSe%22%20x1%3D%22128%22%20x2%3D%22128%22%20y1%3D%220%22%20y2%3D%22256%22%20gradientTransform%3D%22scale(.5)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232684ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230052cc%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGIbGPWdSe)%22%20d%3D%22M12.5%200h103c6.925%200%2012.5%205.575%2012.5%2012.5v103c0%206.925-5.575%2012.5-12.5%2012.5h-103C5.575%20128%200%20122.425%200%20115.5v-103C0%205.575%205.575%200%2012.5%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M78.32%2016.64h27.04c3.324%200%206%202.676%206%206v44c0%203.324-2.676%206-6%206H78.32c-3.324%200-6-2.676-6-6v-44c0-3.324%202.676-6%206-6m-55.68%200h27.04c3.324%200%206%202.676%206%206v76c0%203.324-2.676%206-6%206H22.64c-3.324%200-6-2.676-6-6v-76c0-3.324%202.676-6%206-6%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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIbGPWdSe%22%20x1%3D%22128%22%20x2%3D%22128%22%20y1%3D%220%22%20y2%3D%22256%22%20gradientTransform%3D%22scale(.5)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232684ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230052cc%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGIbGPWdSe)%22%20d%3D%22M12.5%200h103c6.925%200%2012.5%205.575%2012.5%2012.5v103c0%206.925-5.575%2012.5-12.5%2012.5h-103C5.575%20128%200%20122.425%200%20115.5v-103C0%205.575%205.575%200%2012.5%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M78.32%2016.64h27.04c3.324%200%206%202.676%206%206v44c0%203.324-2.676%206-6%206H78.32c-3.324%200-6-2.676-6-6v-44c0-3.324%202.676-6%206-6m-55.68%200h27.04c3.324%200%206%202.676%206%206v76c0%203.324-2.676%206-6%206H22.64c-3.324%200-6-2.676-6-6v-76c0-3.324%202.676-6%206-6%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/trello.svg?color=%231a73e8&size=48
