Monday Light icon
thesvg-color:monday-light
The Monday Light icon (thesvg-color:monday-light) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 467 × 85 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
- 467 × 85
- Tags
- mondaylight
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="467" height="85" viewBox="0 0 467 85"><g transform="translate(0 1.292)scale(3.69565)"><path fill="#f62b54" d="M2.6 17.8c-.9 0-1.8-.5-2.3-1.3s-.4-1.8.1-2.6l4.7-7.4c.5-.8 1.4-1.3 2.3-1.3s1.8.6 2.3 1.4c.4.8.4 1.8-.1 2.6l-4.7 7.4c-.5.8-1.4 1.2-2.3 1.2"/><path fill="#fc0" d="M10.7 17.8c-1 0-1.8-.5-2.3-1.3c-.4-.8-.4-1.8.1-2.6l4.7-7.4c.5-.8 1.4-1.3 2.3-1.3c1 0 1.8.6 2.3 1.4c.4.8.4 1.8-.2 2.6l-4.7 7.4c-.5.8-1.3 1.2-2.2 1.2"/><circle cx="18.6" cy="15.5" r="2.4" fill="#00ca72"/></g><path fill="#fff" d="M459 50.252c2.587 0 4.435 1.848 4.435 5.174v10.718h3.695V55.057c0-5.544-2.587-8.5-7.391-8.5c-1.848 0-4.804.37-6.652 4.065c-.74-2.218-2.587-3.326-4.805-3.696h-2.217c-1.478 0-4.065 1.109-5.174 3.326v-2.956h-3.696v19.217h3.696V56.165c0-4.065 2.587-5.543 5.174-5.543s4.065 1.848 4.065 5.174v10.717h3.696V56.165c0-3.326 1.848-5.913 5.174-5.913m-35.48 12.935c1.848 0 3.327-.74 4.435-1.848c1.109-1.109 1.848-2.956 1.848-4.435c0-3.695-2.956-6.282-6.283-6.282c-3.326 0-6.282 2.587-6.282 6.282c0 1.848.739 3.326 1.848 4.435s2.956 1.848 4.434 1.848m0 3.326c-5.543 0-9.978-4.065-9.978-9.978s4.435-9.978 9.978-9.978s9.979 3.695 9.979 9.978s-4.435 9.978-9.979 9.978m-28.826-9.978c0-5.913 4.435-9.978 9.979-9.978c2.587 0 5.543 1.108 7.391 2.956l-2.957 2.217c-1.108-1.108-2.956-1.847-4.434-1.847c-3.326 0-6.283 2.587-6.283 6.282c0 2.587 1.478 4.805 4.065 5.913s5.174.37 7.022-1.478l2.957 2.217c-1.848 1.848-4.435 3.327-7.392 2.957c-5.543.74-10.348-2.957-10.348-9.24m-11.826 5.913c0-1.478 1.109-2.587 2.587-2.587s2.587 1.109 2.587 2.587s-1.108 2.587-2.587 2.587c-1.108 0-2.217-1.109-2.587-2.587"/><path fill="#fff" fill-rule="evenodd" d="M393.217 22.904h-13.304l-9.24 23.653l-9.238-23.653H348.13l15.892 37.326l-9.979 24.761h12.935zM313.391 43.6c0 5.913 5.174 9.978 10.348 9.978s9.978-3.695 9.978-9.978s-4.804-9.978-9.978-9.978s-10.348 4.065-10.348 9.978m20.326 21.065v-4.804c-2.587 4.065-8.87 5.543-12.195 5.543c-10.718 0-21.066-8.13-21.066-21.804c0-13.304 10.718-21.804 21.066-21.804c2.587 0 8.87.739 12.195 5.543v-4.804h12.196v41.76zm-36.587 0h-12.195v-5.174c-2.218 3.696-7.022 5.913-12.196 5.913c-10.717 0-19.957-8.5-19.957-21.804s9.24-21.804 19.957-21.804c5.174 0 9.978 2.217 12.196 5.913V-.01h12.195zM284.565 43.6c0-6.283-4.435-9.978-9.609-9.978s-9.608 4.065-9.608 9.978c0 6.283 4.434 9.978 9.608 9.978s9.609-4.065 9.609-9.978m-62.087-1.109c0-6.282 3.326-8.5 7.761-8.5c4.065 0 7.022 2.957 7.022 8.13v22.175h12.195v-25.13c0-11.827-5.913-17.74-15.152-17.74c-4.804 0-9.608 2.957-11.826 7.022v-5.913h-12.196v41.76h12.196zm-37.326 22.913c-11.826 0-21.435-8.5-21.435-21.804s9.609-21.804 21.435-21.804s21.435 8.5 21.435 21.804s-9.978 21.804-21.435 21.804m0-12.195c5.174 0 9.24-3.696 9.24-9.609c0-5.543-4.436-9.609-9.24-9.609c-2.587 0-4.804 1.11-6.652 2.587c-1.848 1.848-2.587 4.066-2.587 6.652c0 5.914 4.065 9.979 9.24 9.979m-43.61-19.219c3.696 0 6.653 2.957 6.653 8.13v22.175h12.195V40.644c0-12.566-6.282-18.848-15.891-18.848c-2.957 0-8.5.739-12.565 7.391c-2.218-4.804-6.652-7.391-13.305-7.391c-4.804 0-8.87 2.587-10.717 7.021v-5.913H95.717v41.761h12.196V42.491c0-6.282 3.326-8.5 7.022-8.5c3.695 0 6.652 2.957 6.652 8.13v22.544h12.196V42.491c.739-6.282 3.695-8.5 7.76-8.5" clip-rule="evenodd"/></svg>How to use the Monday Light icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:monday-light" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:monday-light" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:monday-light" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--monday-light]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:monday-light"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:monday-light"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/monday-light.svg" alt="Monday Light icon" width="24" height="24">Related icons in theSVG Color
Monday Light icon FAQ
Is the Monday Light 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 Monday Light icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:monday-light" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Monday Light icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/monday-light.svg" alt="Monday Light icon">, or paste the SVG code inline to style it with CSS.