Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: ring. Pick another to preview it and update the animated code:

css.gg · CgAlarm

Alarm icon

A free alarm icon from css.gg, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asbell iconnotification iconalert iconreminder icon
License
MIT license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/css-gg/alarm.json
components/icons/css-gg-alarm.tsx
import * as React from "react";

/**
 * Alarm from css.gg (https://github.com/astrit/css.gg), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/css-gg/alarm. Sized in em, colored by currentColor.
 */
export function CgAlarmIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M5.45887 2L1 6.01478L2.33826 7.50107L6.79713 3.48629L5.45887 2Z"
        fill="currentColor"
      />
      <path d="M11 8H13V12H16V14H11V8Z" fill="currentColor" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12Z"
        fill="currentColor"
      />
      <path
        d="M18.5411 2L23 6.01478L21.6617 7.50107L17.2029 3.48629L18.5411 2Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { CgAlarm } from "react-icons/cg";

export function Example() {
  return <CgAlarm className="size-5" />;
}
alarm.svg
<svg
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M5.45887 2L1 6.01478L2.33826 7.50107L6.79713 3.48629L5.45887 2Z"
    fill="currentColor"
  />
  <path d="M11 8H13V12H16V14H11V8Z" fill="currentColor" />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12Z"
    fill="currentColor"
  />
  <path
    d="M18.5411 2L23 6.01478L21.6617 7.50107L17.2029 3.48629L18.5411 2Z"
    fill="currentColor"
  />
</svg>
Attribution
"Alarm" icon from css.gg (https://github.com/astrit/css.gg), licensed under MIT license.

Related icons: bell, notification, alert, reminder

Alarm icon in other sets