Calendar Mark Bold Duotone icon

solar:calendar-mark-bold-duotone

The Calendar Mark Bold Duotone icon (solar:calendar-mark-bold-duotone) is a free SVG icon from the Solar set by 480 Design. It is drawn on a 24 × 24 grid. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Solar
Author: 480 Design
License: CC-BY-4.0
Size: 24 × 24
Category: Time
Tags: calendarmark, markbold, boldduotone, calendarmarkboldduotone

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M6.96006 2C7.37758 2 7.71605 2.30996 7.71605 2.69231V4.08883C8.38663 4.07692 9.13829 4.07692 9.98402 4.07692H14.016C14.8617 4.07692 15.6134 4.07692 16.284 4.08883V2.69231C16.284 2.30996 16.6224 2 17.0399 2C17.4575 2 17.7959 2.30996 17.7959 2.69231V4.15008C19.2468 4.25647 20.1992 4.51758 20.899 5.15838C21.5987 5.79917 21.8838 6.67139 22 8V9H2V8C2.11618 6.67139 2.4013 5.79917 3.10104 5.15838C3.80079 4.51758 4.75323 4.25647 6.20406 4.15008V2.69231C6.20406 2.30996 6.54253 2 6.96006 2Z"/><path d="M22 14V12C22 11.161 21.9873 9.66527 21.9744 9H2.00586C1.99296 9.66527 2.00564 11.161 2.00564 12V14C2.00564 17.7712 2.00564 19.6569 3.17688 20.8284C4.34813 22 6.23321 22 10.0034 22H14.0023C17.7724 22 19.6575 22 20.8288 20.8284C22 19.6569 22 17.7712 22 14Z" opacity=".5"/><path d="M18 16.5C18 17.3284 17.3284 18 16.5 18C15.6716 18 15 17.3284 15 16.5C15 15.6716 15.6716 15 16.5 15C17.3284 15 18 15.6716 18 16.5Z"/></g></svg>

How to use the Calendar Mark Bold Duotone icon

React

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

<Icon icon="solar:calendar-mark-bold-duotone" width="24" />

Vue

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

<template>
  <Icon icon="solar:calendar-mark-bold-duotone" width="24" />
</template>

Svelte

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

<Icon icon="solar:calendar-mark-bold-duotone" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--calendar-mark-bold-duotone]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:calendar-mark-bold-duotone"></div>

Web component

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

<iconify-icon icon="solar:calendar-mark-bold-duotone"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/solar/calendar-mark-bold-duotone.svg" alt="Calendar Mark Bold Duotone icon" width="24" height="24">

Related icons in Solar

Calendar Mark Bold Duotone icon FAQ

Is the Calendar Mark Bold Duotone icon free for commercial use?

Yes. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Calendar Mark Bold Duotone icon in React?

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

How do I add the Calendar Mark Bold Duotone icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/solar/calendar-mark-bold-duotone.svg" alt="Calendar Mark Bold Duotone icon">, or paste the SVG code inline to style it with CSS.

Browse all Solar icons →