alarm-clock from Emoji One (Colored) by Emoji One · Default · Objects · CC-BY-4.0 Attribution required.

Name
alarm-clock
Set
Emoji One (Colored)
Style
Default
Category
Objects
Viewbox
64×64
License
CC BY 4.0

The same emoji in other sets

More objects icons from Emoji One (Colored)

Use the alarm clock emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><ellipse cx="32.1" cy="35.8" fill="#428bc1" rx="25.2" ry="25.3"/><ellipse cx="32.1" cy="35.8" fill="#fff" rx="19.6" ry="19.7"/><path fill="#428bc1" d="M11 48.3L8.8 62h1.9c1.2 0 1.6-1.4 2.4-3.1c1-2.2 3.4-7.9 3.4-7.9zm42.1 0L55.4 62h-1.9c-1.2 0-1.6-1.4-2.4-3.1c-1-2.2-3.4-7.9-3.4-7.9zM13.3 10.2l5.9 5.9l-3.1 3.2l-5.9-6zm37.6 0L45 16.1l3.1 3.2l5.9-6z"/><path fill="#b0b8b8" d="M5.7 23.6L23.3 5.7C21.1 3.4 18 2 14.5 2C7.6 2 2 7.7 2 14.6c0 3.5 1.4 6.7 3.7 9M40.5 5.8l17.8 17.7c2.3-2.3 3.7-5.4 3.7-8.9C62 7.7 56.4 2 49.4 2c-3.5.1-6.6 1.5-8.9 3.8"/><path fill="#ed4c5c" d="m20.6 46.6l10.3-10.5l1.2 1.2l-10.3 10.4z"/><g fill="#428bc1"><circle cx="32.1" cy="35.8" r="3.7"/><path d="M30.2 21.7h3.7v15h-3.7zm3.7 12.2h7.5v3.7h-7.5z"/></g></svg>

React

import type { SVGProps } from "react";

export function EmojioneAlarmClock(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><ellipse cx="32.1" cy="35.8" fill="#428bc1" rx="25.2" ry="25.3"/><ellipse cx="32.1" cy="35.8" fill="#fff" rx="19.6" ry="19.7"/><path fill="#428bc1" d="M11 48.3L8.8 62h1.9c1.2 0 1.6-1.4 2.4-3.1c1-2.2 3.4-7.9 3.4-7.9zm42.1 0L55.4 62h-1.9c-1.2 0-1.6-1.4-2.4-3.1c-1-2.2-3.4-7.9-3.4-7.9zM13.3 10.2l5.9 5.9l-3.1 3.2l-5.9-6zm37.6 0L45 16.1l3.1 3.2l5.9-6z"/><path fill="#b0b8b8" d="M5.7 23.6L23.3 5.7C21.1 3.4 18 2 14.5 2C7.6 2 2 7.7 2 14.6c0 3.5 1.4 6.7 3.7 9M40.5 5.8l17.8 17.7c2.3-2.3 3.7-5.4 3.7-8.9C62 7.7 56.4 2 49.4 2c-3.5.1-6.6 1.5-8.9 3.8"/><path fill="#ed4c5c" d="m20.6 46.6l10.3-10.5l1.2 1.2l-10.3 10.4z"/><g fill="#428bc1"><circle cx="32.1" cy="35.8" r="3.7"/><path d="M30.2 21.7h3.7v15h-3.7zm3.7 12.2h7.5v3.7h-7.5z"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><ellipse cx="32.1" cy="35.8" fill="#428bc1" rx="25.2" ry="25.3"/><ellipse cx="32.1" cy="35.8" fill="#fff" rx="19.6" ry="19.7"/><path fill="#428bc1" d="M11 48.3L8.8 62h1.9c1.2 0 1.6-1.4 2.4-3.1c1-2.2 3.4-7.9 3.4-7.9zm42.1 0L55.4 62h-1.9c-1.2 0-1.6-1.4-2.4-3.1c-1-2.2-3.4-7.9-3.4-7.9zM13.3 10.2l5.9 5.9l-3.1 3.2l-5.9-6zm37.6 0L45 16.1l3.1 3.2l5.9-6z"/><path fill="#b0b8b8" d="M5.7 23.6L23.3 5.7C21.1 3.4 18 2 14.5 2C7.6 2 2 7.7 2 14.6c0 3.5 1.4 6.7 3.7 9M40.5 5.8l17.8 17.7c2.3-2.3 3.7-5.4 3.7-8.9C62 7.7 56.4 2 49.4 2c-3.5.1-6.6 1.5-8.9 3.8"/><path fill="#ed4c5c" d="m20.6 46.6l10.3-10.5l1.2 1.2l-10.3 10.4z"/><g fill="#428bc1"><circle cx="32.1" cy="35.8" r="3.7"/><path d="M30.2 21.7h3.7v15h-3.7zm3.7 12.2h7.5v3.7h-7.5z"/></g></svg>
</template>

CSS

.icon-alarm-clock {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cellipse%20cx%3D%2232.1%22%20cy%3D%2235.8%22%20fill%3D%22%23428bc1%22%20rx%3D%2225.2%22%20ry%3D%2225.3%22%2F%3E%3Cellipse%20cx%3D%2232.1%22%20cy%3D%2235.8%22%20fill%3D%22%23fff%22%20rx%3D%2219.6%22%20ry%3D%2219.7%22%2F%3E%3Cpath%20fill%3D%22%23428bc1%22%20d%3D%22M11%2048.3L8.8%2062h1.9c1.2%200%201.6-1.4%202.4-3.1c1-2.2%203.4-7.9%203.4-7.9zm42.1%200L55.4%2062h-1.9c-1.2%200-1.6-1.4-2.4-3.1c-1-2.2-3.4-7.9-3.4-7.9zM13.3%2010.2l5.9%205.9l-3.1%203.2l-5.9-6zm37.6%200L45%2016.1l3.1%203.2l5.9-6z%22%2F%3E%3Cpath%20fill%3D%22%23b0b8b8%22%20d%3D%22M5.7%2023.6L23.3%205.7C21.1%203.4%2018%202%2014.5%202C7.6%202%202%207.7%202%2014.6c0%203.5%201.4%206.7%203.7%209M40.5%205.8l17.8%2017.7c2.3-2.3%203.7-5.4%203.7-8.9C62%207.7%2056.4%202%2049.4%202c-3.5.1-6.6%201.5-8.9%203.8%22%2F%3E%3Cpath%20fill%3D%22%23ed4c5c%22%20d%3D%22m20.6%2046.6l10.3-10.5l1.2%201.2l-10.3%2010.4z%22%2F%3E%3Cg%20fill%3D%22%23428bc1%22%3E%3Ccircle%20cx%3D%2232.1%22%20cy%3D%2235.8%22%20r%3D%223.7%22%2F%3E%3Cpath%20d%3D%22M30.2%2021.7h3.7v15h-3.7zm3.7%2012.2h7.5v3.7h-7.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cellipse%20cx%3D%2232.1%22%20cy%3D%2235.8%22%20fill%3D%22%23428bc1%22%20rx%3D%2225.2%22%20ry%3D%2225.3%22%2F%3E%3Cellipse%20cx%3D%2232.1%22%20cy%3D%2235.8%22%20fill%3D%22%23fff%22%20rx%3D%2219.6%22%20ry%3D%2219.7%22%2F%3E%3Cpath%20fill%3D%22%23428bc1%22%20d%3D%22M11%2048.3L8.8%2062h1.9c1.2%200%201.6-1.4%202.4-3.1c1-2.2%203.4-7.9%203.4-7.9zm42.1%200L55.4%2062h-1.9c-1.2%200-1.6-1.4-2.4-3.1c-1-2.2-3.4-7.9-3.4-7.9zM13.3%2010.2l5.9%205.9l-3.1%203.2l-5.9-6zm37.6%200L45%2016.1l3.1%203.2l5.9-6z%22%2F%3E%3Cpath%20fill%3D%22%23b0b8b8%22%20d%3D%22M5.7%2023.6L23.3%205.7C21.1%203.4%2018%202%2014.5%202C7.6%202%202%207.7%202%2014.6c0%203.5%201.4%206.7%203.7%209M40.5%205.8l17.8%2017.7c2.3-2.3%203.7-5.4%203.7-8.9C62%207.7%2056.4%202%2049.4%202c-3.5.1-6.6%201.5-8.9%203.8%22%2F%3E%3Cpath%20fill%3D%22%23ed4c5c%22%20d%3D%22m20.6%2046.6l10.3-10.5l1.2%201.2l-10.3%2010.4z%22%2F%3E%3Cg%20fill%3D%22%23428bc1%22%3E%3Ccircle%20cx%3D%2232.1%22%20cy%3D%2235.8%22%20r%3D%223.7%22%2F%3E%3Cpath%20d%3D%22M30.2%2021.7h3.7v15h-3.7zm3.7%2012.2h7.5v3.7h-7.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/emojione/alarm-clock.svg?color=%231a73e8&size=48