Duolingo 2024 icon
thesvg-color:duolingo-2024
The Duolingo 2024 icon (thesvg-color:duolingo-2024) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 250 × 250 grid. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 250 × 250
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250"><g fill="none"><path fill="#50c800" fill-rule="evenodd" d="M47.583 0h154.858C228.711 0 250 21.29 250 47.583v154.858c0 26.27-21.289 47.583-47.583 47.583H47.583C21.289 250 0 228.711 0 202.417V47.583C0 21.289 21.29 0 47.583 0" clip-rule="evenodd"/><path fill="#8ee000" fill-rule="evenodd" d="M250.008 161.499V89.185a56.7 56.7 0 0 0-12.182-18.36c.464-7.764-1.27-15.625-5.298-22.632c-2.637-4.59-9.009-5.249-12.573-1.294l-8.081 8.96c-.049-.024-.098-.024-.147-.048c1.05-8.18-.342-16.626-4.346-24.17c-2.49-4.688-7.885-5.518-11.596-1.71l-38.819 39.332c-.439.415-.903.854-1.342 1.294c-.025.024-.074.049-.098.073c-16.87 15.283-43.164 15.918-59.229 1.88a55 55 0 0 0-3.15-3.174l-38.89-39.38c-3.712-3.808-9.107-2.978-11.597 1.71c-3.98 7.519-5.396 15.917-4.37 24.047c-.074.024-.147.024-.22.049l-7.984-8.863c-3.564-3.955-9.936-3.296-12.597 1.294c-3.955 6.86-5.689 14.551-5.323 22.168a57.2 57.2 0 0 0-12.182 17.7v74.585c8.765 19.996 28.735 33.985 51.953 33.985h2.49c23.023 0 42.847-13.745 51.709-33.472q12.78-.073 18.531-.073c8.3-.024 14.77-.024 19.409-.024c8.838 19.775 28.711 33.569 51.757 33.569h1.758c23.658 0 43.921-14.527 52.417-35.132" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M55.453 74.219c21.777 0 39.453 17.65 39.453 39.453v23.364c0 21.777-17.652 39.453-39.453 39.453c-21.778 0-39.454-17.651-39.454-39.453v-23.364c0-21.802 17.676-39.453 39.454-39.453m138.599 0c21.777 0 39.453 17.65 39.453 39.453v23.364c0 21.777-17.652 39.453-39.453 39.453c-21.778 0-39.454-17.651-39.454-39.453v-23.364c0-21.802 17.652-39.453 39.454-39.453" clip-rule="evenodd"/><path fill="#4b4b4b" fill-rule="evenodd" d="M61.532 96.875c10.327 0 18.725 8.374 18.725 18.726v19.995c0 10.327-8.374 18.725-18.725 18.725c-10.327 0-18.726-8.374-18.726-18.725v-19.995c0-10.352 8.399-18.726 18.726-18.726" clip-rule="evenodd"/><path fill="#f48000" fill-rule="evenodd" d="M125.01 142.266c11.84 0 21.435 9.595 21.435 21.435v7.447c0 11.841-9.595 21.435-21.435 21.435c-11.841 0-21.436-9.594-21.436-21.435v-7.447c0-11.84 9.595-21.435 21.436-21.435" clip-rule="evenodd"/><path fill="#ffc200" d="M95.42 165.752c2.563-13.671 15.234-23.535 30.395-23.535c13.794 0 26.27 10.108 28.784 23.535v1.099c0 .855-.293 1.196-1.074 1.099l-27.685 4.931h-1.636l-27.71-4.956c-.781.098-1.074-.244-1.074-1.098z"/><path fill="#ffe747" fill-rule="evenodd" d="M120.468 146.953a19.3 19.3 0 0 1 4.419-.537c1.587 0 3.199.196 4.786.611a7.285 7.285 0 0 1 5.468 7.055a4.83 4.83 0 0 1-4.834 4.834h-10.595a4.83 4.83 0 0 1-4.834-4.834c-.025-3.369 2.295-6.323 5.59-7.129" clip-rule="evenodd"/><path fill="#4b4b4b" fill-rule="evenodd" d="M187.972 96.875c10.328 0 18.726 8.374 18.726 18.726v19.995c0 10.327-8.374 18.725-18.726 18.725c-10.327 0-18.725-8.374-18.725-18.725v-19.995c.024-10.352 8.398-18.726 18.725-18.726" clip-rule="evenodd"/><path fill="#fff" d="M45.711 119.58c6.675 0 12.085-5.389 12.085-12.036s-5.41-12.036-12.085-12.036c-6.674 0-12.084 5.389-12.084 12.036s5.41 12.036 12.084 12.036m124.61 0c6.674 0 12.085-5.389 12.085-12.036s-5.411-12.036-12.085-12.036s-12.085 5.389-12.085 12.036s5.41 12.036 12.085 12.036"/></g></svg>How to use the Duolingo 2024 icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:duolingo-2024" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:duolingo-2024" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:duolingo-2024" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--duolingo-2024]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:duolingo-2024"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:duolingo-2024"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/duolingo-2024.svg" alt="Duolingo 2024 icon" width="24" height="24">Related icons in theSVG Color
Duolingo 2024 icon FAQ
Is the Duolingo 2024 icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Duolingo 2024 icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:duolingo-2024" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Duolingo 2024 icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/duolingo-2024.svg" alt="Duolingo 2024 icon">, or paste the SVG code inline to style it with CSS.