Google Calendar icon

thesvg-color:google-calendar

The Google Calendar icon (thesvg-color:google-calendar) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 512 × 512 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: 512 × 512
Tags: googlecalendar

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><g fill="none"><g clip-path="url(#SVGuyku8X7A)"><path fill="#fff" d="M390.736 121.264H121.264v269.472h269.472z"/><path fill="#ea4335" d="M390.736 512L512 390.736l-60.632-10.344l-60.632 10.344l-11.066 55.46z"/><path fill="#188038" d="M0 390.736v80.842C0 493.912 18.088 512 40.42 512h80.844l12.45-60.632l-12.45-60.632l-66.066-10.344z"/><path fill="#1967d2" d="M512 121.264V40.42C512 18.088 493.912 0 471.58 0h-80.844q-11.064 45.108-11.066 66.392q0 21.282 11.066 54.872q40.23 11.52 60.632 11.52T512 121.264"/><path fill="#fbbc04" d="M512 121.264H390.736v269.472H512z"/><path fill="#34a853" d="M390.736 390.736H121.264V512h269.472z"/><path fill="#4285f4" d="M390.736 0H40.422C18.088 0 0 18.088 0 40.42v350.316h121.264V121.264h269.472z"/><path fill="#4285f4" d="M176.54 330.308c-10.072-6.804-17.046-16.74-20.852-29.88l23.378-9.632q3.18 12.126 11.116 18.796c5.254 4.446 11.654 6.636 19.132 6.636q11.467 0 19.704-6.974c5.492-4.648 8.254-10.576 8.254-17.75q0-11.016-8.69-17.988c-5.794-4.648-13.07-6.972-21.76-6.972h-13.508v-23.14h12.126q11.216 0 18.896-6.066c5.12-4.04 7.68-9.566 7.68-16.606c0-6.264-2.29-11.25-6.87-14.988c-4.58-3.74-10.376-5.626-17.416-5.626c-6.872 0-12.328 1.82-16.37 5.49a32.2 32.2 0 0 0-8.826 13.508l-23.14-9.634c3.064-8.69 8.69-16.37 16.942-23.006s18.796-9.97 31.596-9.97c9.466 0 17.988 1.82 25.534 5.49c7.544 3.672 13.472 8.758 17.75 15.226c4.28 6.5 6.4 13.776 6.4 21.86c0 8.252-1.986 15.226-5.96 20.952s-8.86 10.104-14.654 13.17v1.38a44.5 44.5 0 0 1 18.796 14.654c4.884 6.568 7.344 14.416 7.344 23.58c0 9.16-2.326 17.346-6.974 24.52c-4.648 7.176-11.08 12.834-19.234 16.944c-8.184 4.11-17.38 6.2-27.586 6.2c-11.824.032-22.736-3.37-32.808-10.174m143.592-116.01l-25.666 18.56l-12.834-19.468l46.046-33.214h17.65v156.666h-25.196z"/></g><defs><clipPath id="SVGuyku8X7A"><path fill="#fff" d="M0 0h512v512H0z"/></clipPath></defs></g></svg>

How to use the Google Calendar icon

React

import { Icon } from "@iconify/react";

<Icon icon="thesvg-color:google-calendar" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="thesvg-color:google-calendar" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="thesvg-color:google-calendar" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--google-calendar]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:google-calendar"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="thesvg-color:google-calendar"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/thesvg-color/google-calendar.svg" alt="Google Calendar icon" width="24" height="24">

Related icons in theSVG Color

Google Calendar icon in other icon sets

Google Calendar icon FAQ

Is the Google Calendar 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 Google Calendar icon in React?

Install @iconify/react and render <Icon icon="thesvg-color:google-calendar" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Google Calendar icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/google-calendar.svg" alt="Google Calendar icon">, or paste the SVG code inline to style it with CSS.

Browse all theSVG Color icons →