todomvc logo

todomvc from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
todomvc
Set
SVG Logos
Style
Color
Viewbox
256×230
License
CC0

Use the todomvc logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 230"><path fill="#383838" d="M34.404 15.29h23.547V0H34.404a34.3 34.3 0 0 0-18.363 5.306l8.17 12.925a19.04 19.04 0 0 1 10.193-2.941M15.29 34.404c0-2.794.587-5.482 1.744-7.991L3.148 20.012A34.1 34.1 0 0 0 0 34.404v27.064h15.29zM0 76.911h15.29v38.532H0zm205.901-58.194a331 331 0 0 1 13.753-8.257a34.7 34.7 0 0 0-8.941-6.645A34.5 34.5 0 0 0 194.954 0h-13.532v15.29h13.532c4.006 0 7.788 1.211 10.947 3.427M0 130.887h15.29v38.609H0zM73.395 0h38.532v15.291H73.395zm53.975 0h38.609v15.291H127.37zm17.049 214.067h38.532v15.291h-38.532zM214.068 86.85h15.291v38.609h-15.291zm0 54.052h15.291v38.532h-15.291zM15.29 194.954v-10.015H0v10.015a34.44 34.44 0 0 0 17.783 30.129l7.395-13.384a19.14 19.14 0 0 1-9.888-16.745M214.068 61.267v10.14h15.29V48.698c-5.026 3.742-10.128 7.936-15.29 12.569m0 133.687c0 9.585-7.153 17.734-16.639 18.956l1.952 15.165a34.37 34.37 0 0 0 21.331-11.313a34.37 34.37 0 0 0 8.646-22.808v-.076h-15.29zM36.315 214.067h38.609v15.291H36.315zm54.052 0h38.609v15.291H90.367z"/><path fill="#af2f2f" d="m35.015 121.738l71.72 71.72S178.455 55.479 256 24.534L253.088 2.69C210.857 19.437 146.782 63.489 99.454 130.839l-49.876-29.488z"/></svg>

React

import type { SVGProps } from "react";

export function LogosTodomvc(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 230"><path fill="#383838" d="M34.404 15.29h23.547V0H34.404a34.3 34.3 0 0 0-18.363 5.306l8.17 12.925a19.04 19.04 0 0 1 10.193-2.941M15.29 34.404c0-2.794.587-5.482 1.744-7.991L3.148 20.012A34.1 34.1 0 0 0 0 34.404v27.064h15.29zM0 76.911h15.29v38.532H0zm205.901-58.194a331 331 0 0 1 13.753-8.257a34.7 34.7 0 0 0-8.941-6.645A34.5 34.5 0 0 0 194.954 0h-13.532v15.29h13.532c4.006 0 7.788 1.211 10.947 3.427M0 130.887h15.29v38.609H0zM73.395 0h38.532v15.291H73.395zm53.975 0h38.609v15.291H127.37zm17.049 214.067h38.532v15.291h-38.532zM214.068 86.85h15.291v38.609h-15.291zm0 54.052h15.291v38.532h-15.291zM15.29 194.954v-10.015H0v10.015a34.44 34.44 0 0 0 17.783 30.129l7.395-13.384a19.14 19.14 0 0 1-9.888-16.745M214.068 61.267v10.14h15.29V48.698c-5.026 3.742-10.128 7.936-15.29 12.569m0 133.687c0 9.585-7.153 17.734-16.639 18.956l1.952 15.165a34.37 34.37 0 0 0 21.331-11.313a34.37 34.37 0 0 0 8.646-22.808v-.076h-15.29zM36.315 214.067h38.609v15.291H36.315zm54.052 0h38.609v15.291H90.367z"/><path fill="#af2f2f" d="m35.015 121.738l71.72 71.72S178.455 55.479 256 24.534L253.088 2.69C210.857 19.437 146.782 63.489 99.454 130.839l-49.876-29.488z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 230"><path fill="#383838" d="M34.404 15.29h23.547V0H34.404a34.3 34.3 0 0 0-18.363 5.306l8.17 12.925a19.04 19.04 0 0 1 10.193-2.941M15.29 34.404c0-2.794.587-5.482 1.744-7.991L3.148 20.012A34.1 34.1 0 0 0 0 34.404v27.064h15.29zM0 76.911h15.29v38.532H0zm205.901-58.194a331 331 0 0 1 13.753-8.257a34.7 34.7 0 0 0-8.941-6.645A34.5 34.5 0 0 0 194.954 0h-13.532v15.29h13.532c4.006 0 7.788 1.211 10.947 3.427M0 130.887h15.29v38.609H0zM73.395 0h38.532v15.291H73.395zm53.975 0h38.609v15.291H127.37zm17.049 214.067h38.532v15.291h-38.532zM214.068 86.85h15.291v38.609h-15.291zm0 54.052h15.291v38.532h-15.291zM15.29 194.954v-10.015H0v10.015a34.44 34.44 0 0 0 17.783 30.129l7.395-13.384a19.14 19.14 0 0 1-9.888-16.745M214.068 61.267v10.14h15.29V48.698c-5.026 3.742-10.128 7.936-15.29 12.569m0 133.687c0 9.585-7.153 17.734-16.639 18.956l1.952 15.165a34.37 34.37 0 0 0 21.331-11.313a34.37 34.37 0 0 0 8.646-22.808v-.076h-15.29zM36.315 214.067h38.609v15.291H36.315zm54.052 0h38.609v15.291H90.367z"/><path fill="#af2f2f" d="m35.015 121.738l71.72 71.72S178.455 55.479 256 24.534L253.088 2.69C210.857 19.437 146.782 63.489 99.454 130.839l-49.876-29.488z"/></svg>
</template>

CSS

.icon-todomvc {
  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%20256%20230%22%3E%3Cpath%20fill%3D%22%23383838%22%20d%3D%22M34.404%2015.29h23.547V0H34.404a34.3%2034.3%200%200%200-18.363%205.306l8.17%2012.925a19.04%2019.04%200%200%201%2010.193-2.941M15.29%2034.404c0-2.794.587-5.482%201.744-7.991L3.148%2020.012A34.1%2034.1%200%200%200%200%2034.404v27.064h15.29zM0%2076.911h15.29v38.532H0zm205.901-58.194a331%20331%200%200%201%2013.753-8.257a34.7%2034.7%200%200%200-8.941-6.645A34.5%2034.5%200%200%200%20194.954%200h-13.532v15.29h13.532c4.006%200%207.788%201.211%2010.947%203.427M0%20130.887h15.29v38.609H0zM73.395%200h38.532v15.291H73.395zm53.975%200h38.609v15.291H127.37zm17.049%20214.067h38.532v15.291h-38.532zM214.068%2086.85h15.291v38.609h-15.291zm0%2054.052h15.291v38.532h-15.291zM15.29%20194.954v-10.015H0v10.015a34.44%2034.44%200%200%200%2017.783%2030.129l7.395-13.384a19.14%2019.14%200%200%201-9.888-16.745M214.068%2061.267v10.14h15.29V48.698c-5.026%203.742-10.128%207.936-15.29%2012.569m0%20133.687c0%209.585-7.153%2017.734-16.639%2018.956l1.952%2015.165a34.37%2034.37%200%200%200%2021.331-11.313a34.37%2034.37%200%200%200%208.646-22.808v-.076h-15.29zM36.315%20214.067h38.609v15.291H36.315zm54.052%200h38.609v15.291H90.367z%22%2F%3E%3Cpath%20fill%3D%22%23af2f2f%22%20d%3D%22m35.015%20121.738l71.72%2071.72S178.455%2055.479%20256%2024.534L253.088%202.69C210.857%2019.437%20146.782%2063.489%2099.454%20130.839l-49.876-29.488z%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%20256%20230%22%3E%3Cpath%20fill%3D%22%23383838%22%20d%3D%22M34.404%2015.29h23.547V0H34.404a34.3%2034.3%200%200%200-18.363%205.306l8.17%2012.925a19.04%2019.04%200%200%201%2010.193-2.941M15.29%2034.404c0-2.794.587-5.482%201.744-7.991L3.148%2020.012A34.1%2034.1%200%200%200%200%2034.404v27.064h15.29zM0%2076.911h15.29v38.532H0zm205.901-58.194a331%20331%200%200%201%2013.753-8.257a34.7%2034.7%200%200%200-8.941-6.645A34.5%2034.5%200%200%200%20194.954%200h-13.532v15.29h13.532c4.006%200%207.788%201.211%2010.947%203.427M0%20130.887h15.29v38.609H0zM73.395%200h38.532v15.291H73.395zm53.975%200h38.609v15.291H127.37zm17.049%20214.067h38.532v15.291h-38.532zM214.068%2086.85h15.291v38.609h-15.291zm0%2054.052h15.291v38.532h-15.291zM15.29%20194.954v-10.015H0v10.015a34.44%2034.44%200%200%200%2017.783%2030.129l7.395-13.384a19.14%2019.14%200%200%201-9.888-16.745M214.068%2061.267v10.14h15.29V48.698c-5.026%203.742-10.128%207.936-15.29%2012.569m0%20133.687c0%209.585-7.153%2017.734-16.639%2018.956l1.952%2015.165a34.37%2034.37%200%200%200%2021.331-11.313a34.37%2034.37%200%200%200%208.646-22.808v-.076h-15.29zM36.315%20214.067h38.609v15.291H36.315zm54.052%200h38.609v15.291H90.367z%22%2F%3E%3Cpath%20fill%3D%22%23af2f2f%22%20d%3D%22m35.015%20121.738l71.72%2071.72S178.455%2055.479%20256%2024.534L253.088%202.69C210.857%2019.437%20146.782%2063.489%2099.454%20130.839l-49.876-29.488z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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