devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки календаря (SVG)

48 бесплатных иконок календаря из наборов с открытым исходным кодом — нажмите на любую, чтобы изменить размер, цвет и толщину обводки, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

calendar
Lucidecalendar
Tablercalendar
Heroiconscalendar
Phosphorcalendar
Bootstrap Iconscalendar
Iconoircalendar-12-filled
Fluent UIcalendar
Material Design Iconscalendar
Carboncalendar-1
Lucidecalendar-filled
Tablercalendar-16-solid
Heroiconscalendar-bold
Phosphorcalendar-fill
Bootstrap Iconscalendar-12-regular
Fluent UIcalendar-outline
Material Design Iconscalendar-add
Carboncalendar-x
Lucidecalendar-x
Tablercalendar-20-solid
Heroiconscalendar-duotone
Phosphorcalendar-x
Bootstrap Iconscalendar-16-filled
Fluent UIcalendar-end
Material Design Iconscalendar-cog
Lucidecalendar-up
Tablercalendar-solid
Heroiconscalendar-fill
Phosphorcalendar-x-fill
Bootstrap Iconscalendar-16-regular
Fluent UIcalendar-end-outline
Material Design Iconscalendar-off
Lucidecalendar-cog
Tablercalendar-light
Phosphorcalendar-day
Bootstrap Iconscalendar-20-filled
Fluent UIcalendar-x-2
Lucidecalendar-dot
Tablercalendar-thin
Phosphorcalendar-day-fill
Bootstrap Iconscalendar-20-regular
Fluent UIcalendar-due
Tablercalendar-x
Phosphorcalendar-24-filled
Fluent UIcalendar-off
Tablercalendar-x-bold
Phosphorcalendar-24-regular
Fluent UIcalendar-pin
Tabler

Использование иконок календаря

Иконки календаря обозначают даты, бронирования, события и выбор дат в календаре.

Все иконки здесь следуют currentColor, поэтому принимают цвет текста того элемента, в котором находятся: один SVG одинаково хорошо выглядит на светлом и тёмном фоне, в ссылках и кнопках. Задайте явные width и height (или размер в CSS через 1em), чтобы верстка не смещалась при загрузке страницы.

Доступность иконок

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Календарь».

Лицензии

Эти иконки календаря взяты из наборов Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Design Icons и Carbon. Это наборы с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки календаря в коммерческих проектах бесплатно?
Да. Они взяты из наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если распространяете сами файлы иконок.
Как изменить цвет иконки календаря?
SVG используют currentColor, поэтому задайте CSS-свойство color родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте «Copy to Webflow» (вставит Code Embed) или «Copy JSX» для React-компонента.