trello logo
trello-wordmark from Devicon by konpa · Wordmark · MIT Free for personal and commercial use.
- Name
- trello-wordmark
- Set
- Devicon
- Style
- Wordmark
- Viewbox
- 128×128
- License
- MIT
1 other variant in Devicon
The same logo in other sets
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="SVGJ8Pkhdiw" x1="128" x2="128" y1="0" y2="256" gradientTransform="translate(0 50.95)scale(.10032)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2684ff"/><stop offset="1" stop-color="#0052cc"/></linearGradient></defs><path fill="#293856" d="M88.89 50.95v20.27c0 3.892 2.162 5.537 5.597 5.537a7.7 7.7 0 0 0 2.109-.213v-4.562a6 6 0 0 1-.782.036c-.905 0-1.645-.4-1.645-1.522V50.95Zm11.007 0v20.27c0 3.892 2.164 5.537 5.6 5.537a7.7 7.7 0 0 0 2.122-.213v-4.562a6 6 0 0 1-.778.036c-.921 0-1.667-.4-1.667-1.522V50.95Zm-64.111 1.88v4.961h5.877v18.823h5.671V57.791h5.878v-4.96zm41.289 4.88c-5.645 0-9.26 4.092-9.26 9.811c0 5.937 3.117 9.463 10.165 9.463a16.9 16.9 0 0 0 6.122-1.094v-4.435c-1.81.58-3.847 1.156-5.937 1.156c-2.806 0-4.76-.922-5.237-3.588a44 44 0 0 0 4.42.259c4.015 0 7.403-1.076 7.403-4.964c0-3.773-3.484-6.608-7.676-6.608m42.035.008c-5.67 0-8.962 3.913-8.962 9.632c0 5.682 3.33 9.7 8.962 9.7s8.89-3.969 8.89-9.7s-3.22-9.632-8.89-9.632m-53.775.113c-2.514.023-3.973 1.475-4.906 3.816V58.1h-5.241v18.514h5.24v-9.702c0-2.966 1.72-3.871 5.423-3.583v-5.484a7 7 0 0 0-.516-.014m11.632 3.918c1.485 0 2.678 1.01 2.678 2.388c0 1.773-1.871 2.328-4.027 2.328a18.4 18.4 0 0 1-2.74-.22a6.2 6.2 0 0 1 .729-2.467a3.88 3.88 0 0 1 3.36-2.02zm42.143.662c2.625 0 3.755 2.154 3.755 4.939s-1.101 4.994-3.755 4.994s-3.822-2.209-3.822-4.994c0-2.79 1.197-4.939 3.822-4.939"/><path fill="url(#SVGJ8Pkhdiw)" d="M2.508 50.95h20.665a2.5 2.5 0 0 1 2.508 2.508v20.665a2.5 2.5 0 0 1-2.508 2.508H2.508A2.5 2.5 0 0 1 0 74.123V53.458a2.5 2.5 0 0 1 2.508-2.508"/><path fill="#fff" d="M15.714 54.288h5.425c.667 0 1.204.538 1.204 1.204v8.828a1.2 1.2 0 0 1-1.204 1.204h-5.425a1.2 1.2 0 0 1-1.204-1.204v-8.828a1.2 1.2 0 0 1 1.204-1.203zm-11.172 0h5.425c.667 0 1.204.538 1.204 1.204V70.74a1.2 1.2 0 0 1-1.204 1.204H4.542a1.2 1.2 0 0 1-1.204-1.204V55.492c0-.667.537-1.204 1.204-1.204"/></svg>
React
import type { SVGProps } from "react";
export function DeviconTrelloWordmark(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="SVGJ8Pkhdiw" x1="128" x2="128" y1="0" y2="256" gradientTransform="translate(0 50.95)scale(.10032)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#2684ff"/><stop offset="1" stopColor="#0052cc"/></linearGradient></defs><path fill="#293856" d="M88.89 50.95v20.27c0 3.892 2.162 5.537 5.597 5.537a7.7 7.7 0 0 0 2.109-.213v-4.562a6 6 0 0 1-.782.036c-.905 0-1.645-.4-1.645-1.522V50.95Zm11.007 0v20.27c0 3.892 2.164 5.537 5.6 5.537a7.7 7.7 0 0 0 2.122-.213v-4.562a6 6 0 0 1-.778.036c-.921 0-1.667-.4-1.667-1.522V50.95Zm-64.111 1.88v4.961h5.877v18.823h5.671V57.791h5.878v-4.96zm41.289 4.88c-5.645 0-9.26 4.092-9.26 9.811c0 5.937 3.117 9.463 10.165 9.463a16.9 16.9 0 0 0 6.122-1.094v-4.435c-1.81.58-3.847 1.156-5.937 1.156c-2.806 0-4.76-.922-5.237-3.588a44 44 0 0 0 4.42.259c4.015 0 7.403-1.076 7.403-4.964c0-3.773-3.484-6.608-7.676-6.608m42.035.008c-5.67 0-8.962 3.913-8.962 9.632c0 5.682 3.33 9.7 8.962 9.7s8.89-3.969 8.89-9.7s-3.22-9.632-8.89-9.632m-53.775.113c-2.514.023-3.973 1.475-4.906 3.816V58.1h-5.241v18.514h5.24v-9.702c0-2.966 1.72-3.871 5.423-3.583v-5.484a7 7 0 0 0-.516-.014m11.632 3.918c1.485 0 2.678 1.01 2.678 2.388c0 1.773-1.871 2.328-4.027 2.328a18.4 18.4 0 0 1-2.74-.22a6.2 6.2 0 0 1 .729-2.467a3.88 3.88 0 0 1 3.36-2.02zm42.143.662c2.625 0 3.755 2.154 3.755 4.939s-1.101 4.994-3.755 4.994s-3.822-2.209-3.822-4.994c0-2.79 1.197-4.939 3.822-4.939"/><path fill="url(#SVGJ8Pkhdiw)" d="M2.508 50.95h20.665a2.5 2.5 0 0 1 2.508 2.508v20.665a2.5 2.5 0 0 1-2.508 2.508H2.508A2.5 2.5 0 0 1 0 74.123V53.458a2.5 2.5 0 0 1 2.508-2.508"/><path fill="#fff" d="M15.714 54.288h5.425c.667 0 1.204.538 1.204 1.204v8.828a1.2 1.2 0 0 1-1.204 1.204h-5.425a1.2 1.2 0 0 1-1.204-1.204v-8.828a1.2 1.2 0 0 1 1.204-1.203zm-11.172 0h5.425c.667 0 1.204.538 1.204 1.204V70.74a1.2 1.2 0 0 1-1.204 1.204H4.542a1.2 1.2 0 0 1-1.204-1.204V55.492c0-.667.537-1.204 1.204-1.204"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><defs><linearGradient id="SVGJ8Pkhdiw" x1="128" x2="128" y1="0" y2="256" gradientTransform="translate(0 50.95)scale(.10032)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2684ff"/><stop offset="1" stop-color="#0052cc"/></linearGradient></defs><path fill="#293856" d="M88.89 50.95v20.27c0 3.892 2.162 5.537 5.597 5.537a7.7 7.7 0 0 0 2.109-.213v-4.562a6 6 0 0 1-.782.036c-.905 0-1.645-.4-1.645-1.522V50.95Zm11.007 0v20.27c0 3.892 2.164 5.537 5.6 5.537a7.7 7.7 0 0 0 2.122-.213v-4.562a6 6 0 0 1-.778.036c-.921 0-1.667-.4-1.667-1.522V50.95Zm-64.111 1.88v4.961h5.877v18.823h5.671V57.791h5.878v-4.96zm41.289 4.88c-5.645 0-9.26 4.092-9.26 9.811c0 5.937 3.117 9.463 10.165 9.463a16.9 16.9 0 0 0 6.122-1.094v-4.435c-1.81.58-3.847 1.156-5.937 1.156c-2.806 0-4.76-.922-5.237-3.588a44 44 0 0 0 4.42.259c4.015 0 7.403-1.076 7.403-4.964c0-3.773-3.484-6.608-7.676-6.608m42.035.008c-5.67 0-8.962 3.913-8.962 9.632c0 5.682 3.33 9.7 8.962 9.7s8.89-3.969 8.89-9.7s-3.22-9.632-8.89-9.632m-53.775.113c-2.514.023-3.973 1.475-4.906 3.816V58.1h-5.241v18.514h5.24v-9.702c0-2.966 1.72-3.871 5.423-3.583v-5.484a7 7 0 0 0-.516-.014m11.632 3.918c1.485 0 2.678 1.01 2.678 2.388c0 1.773-1.871 2.328-4.027 2.328a18.4 18.4 0 0 1-2.74-.22a6.2 6.2 0 0 1 .729-2.467a3.88 3.88 0 0 1 3.36-2.02zm42.143.662c2.625 0 3.755 2.154 3.755 4.939s-1.101 4.994-3.755 4.994s-3.822-2.209-3.822-4.994c0-2.79 1.197-4.939 3.822-4.939"/><path fill="url(#SVGJ8Pkhdiw)" d="M2.508 50.95h20.665a2.5 2.5 0 0 1 2.508 2.508v20.665a2.5 2.5 0 0 1-2.508 2.508H2.508A2.5 2.5 0 0 1 0 74.123V53.458a2.5 2.5 0 0 1 2.508-2.508"/><path fill="#fff" d="M15.714 54.288h5.425c.667 0 1.204.538 1.204 1.204v8.828a1.2 1.2 0 0 1-1.204 1.204h-5.425a1.2 1.2 0 0 1-1.204-1.204v-8.828a1.2 1.2 0 0 1 1.204-1.203zm-11.172 0h5.425c.667 0 1.204.538 1.204 1.204V70.74a1.2 1.2 0 0 1-1.204 1.204H4.542a1.2 1.2 0 0 1-1.204-1.204V55.492c0-.667.537-1.204 1.204-1.204"/></svg> </template>
CSS
.icon-trello-wordmark {
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%22SVGJ8Pkhdiw%22%20x1%3D%22128%22%20x2%3D%22128%22%20y1%3D%220%22%20y2%3D%22256%22%20gradientTransform%3D%22translate(0%2050.95)scale(.10032)%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%22%23293856%22%20d%3D%22M88.89%2050.95v20.27c0%203.892%202.162%205.537%205.597%205.537a7.7%207.7%200%200%200%202.109-.213v-4.562a6%206%200%200%201-.782.036c-.905%200-1.645-.4-1.645-1.522V50.95Zm11.007%200v20.27c0%203.892%202.164%205.537%205.6%205.537a7.7%207.7%200%200%200%202.122-.213v-4.562a6%206%200%200%201-.778.036c-.921%200-1.667-.4-1.667-1.522V50.95Zm-64.111%201.88v4.961h5.877v18.823h5.671V57.791h5.878v-4.96zm41.289%204.88c-5.645%200-9.26%204.092-9.26%209.811c0%205.937%203.117%209.463%2010.165%209.463a16.9%2016.9%200%200%200%206.122-1.094v-4.435c-1.81.58-3.847%201.156-5.937%201.156c-2.806%200-4.76-.922-5.237-3.588a44%2044%200%200%200%204.42.259c4.015%200%207.403-1.076%207.403-4.964c0-3.773-3.484-6.608-7.676-6.608m42.035.008c-5.67%200-8.962%203.913-8.962%209.632c0%205.682%203.33%209.7%208.962%209.7s8.89-3.969%208.89-9.7s-3.22-9.632-8.89-9.632m-53.775.113c-2.514.023-3.973%201.475-4.906%203.816V58.1h-5.241v18.514h5.24v-9.702c0-2.966%201.72-3.871%205.423-3.583v-5.484a7%207%200%200%200-.516-.014m11.632%203.918c1.485%200%202.678%201.01%202.678%202.388c0%201.773-1.871%202.328-4.027%202.328a18.4%2018.4%200%200%201-2.74-.22a6.2%206.2%200%200%201%20.729-2.467a3.88%203.88%200%200%201%203.36-2.02zm42.143.662c2.625%200%203.755%202.154%203.755%204.939s-1.101%204.994-3.755%204.994s-3.822-2.209-3.822-4.994c0-2.79%201.197-4.939%203.822-4.939%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJ8Pkhdiw)%22%20d%3D%22M2.508%2050.95h20.665a2.5%202.5%200%200%201%202.508%202.508v20.665a2.5%202.5%200%200%201-2.508%202.508H2.508A2.5%202.5%200%200%201%200%2074.123V53.458a2.5%202.5%200%200%201%202.508-2.508%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M15.714%2054.288h5.425c.667%200%201.204.538%201.204%201.204v8.828a1.2%201.2%200%200%201-1.204%201.204h-5.425a1.2%201.2%200%200%201-1.204-1.204v-8.828a1.2%201.2%200%200%201%201.204-1.203zm-11.172%200h5.425c.667%200%201.204.538%201.204%201.204V70.74a1.2%201.2%200%200%201-1.204%201.204H4.542a1.2%201.2%200%200%201-1.204-1.204V55.492c0-.667.537-1.204%201.204-1.204%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%22SVGJ8Pkhdiw%22%20x1%3D%22128%22%20x2%3D%22128%22%20y1%3D%220%22%20y2%3D%22256%22%20gradientTransform%3D%22translate(0%2050.95)scale(.10032)%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%22%23293856%22%20d%3D%22M88.89%2050.95v20.27c0%203.892%202.162%205.537%205.597%205.537a7.7%207.7%200%200%200%202.109-.213v-4.562a6%206%200%200%201-.782.036c-.905%200-1.645-.4-1.645-1.522V50.95Zm11.007%200v20.27c0%203.892%202.164%205.537%205.6%205.537a7.7%207.7%200%200%200%202.122-.213v-4.562a6%206%200%200%201-.778.036c-.921%200-1.667-.4-1.667-1.522V50.95Zm-64.111%201.88v4.961h5.877v18.823h5.671V57.791h5.878v-4.96zm41.289%204.88c-5.645%200-9.26%204.092-9.26%209.811c0%205.937%203.117%209.463%2010.165%209.463a16.9%2016.9%200%200%200%206.122-1.094v-4.435c-1.81.58-3.847%201.156-5.937%201.156c-2.806%200-4.76-.922-5.237-3.588a44%2044%200%200%200%204.42.259c4.015%200%207.403-1.076%207.403-4.964c0-3.773-3.484-6.608-7.676-6.608m42.035.008c-5.67%200-8.962%203.913-8.962%209.632c0%205.682%203.33%209.7%208.962%209.7s8.89-3.969%208.89-9.7s-3.22-9.632-8.89-9.632m-53.775.113c-2.514.023-3.973%201.475-4.906%203.816V58.1h-5.241v18.514h5.24v-9.702c0-2.966%201.72-3.871%205.423-3.583v-5.484a7%207%200%200%200-.516-.014m11.632%203.918c1.485%200%202.678%201.01%202.678%202.388c0%201.773-1.871%202.328-4.027%202.328a18.4%2018.4%200%200%201-2.74-.22a6.2%206.2%200%200%201%20.729-2.467a3.88%203.88%200%200%201%203.36-2.02zm42.143.662c2.625%200%203.755%202.154%203.755%204.939s-1.101%204.994-3.755%204.994s-3.822-2.209-3.822-4.994c0-2.79%201.197-4.939%203.822-4.939%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJ8Pkhdiw)%22%20d%3D%22M2.508%2050.95h20.665a2.5%202.5%200%200%201%202.508%202.508v20.665a2.5%202.5%200%200%201-2.508%202.508H2.508A2.5%202.5%200%200%201%200%2074.123V53.458a2.5%202.5%200%200%201%202.508-2.508%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M15.714%2054.288h5.425c.667%200%201.204.538%201.204%201.204v8.828a1.2%201.2%200%200%201-1.204%201.204h-5.425a1.2%201.2%200%200%201-1.204-1.204v-8.828a1.2%201.2%200%200%201%201.204-1.203zm-11.172%200h5.425c.667%200%201.204.538%201.204%201.204V70.74a1.2%201.2%200%200%201-1.204%201.204H4.542a1.2%201.2%200%200%201-1.204-1.204V55.492c0-.667.537-1.204%201.204-1.204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/trello-wordmark.svg?color=%231a73e8&size=48
