Skip to content
Cuelark UI

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

Remix Icon · RiLiveFill

Live Fill icon

A free live fill icon from Remix Icon, 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.

License
Apache License Version 2.0
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/remix/live-fill.json
components/icons/remix-live-fill.tsx
import * as React from "react";

/**
 * Live Fill from Remix Icon (https://github.com/Remix-Design/RemixIcon), Apache License Version 2.0.
 * Via Cuelark UI: ui.cuelark.com/icons/remix/live-fill. Sized in em, colored by currentColor.
 */
export function RiLiveFillIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      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="M16 4C16.5523 4 17 4.44772 17 5V9.2L22.2133 5.55071C22.4395 5.39235 22.7513 5.44737 22.9096 5.6736C22.9684 5.75764 23 5.85774 23 5.96033V18.0397C23 18.3158 22.7761 18.5397 22.5 18.5397C22.3974 18.5397 22.2973 18.5081 22.2133 18.4493L17 14.8V19C17 19.5523 16.5523 20 16 20H2C1.44772 20 1 19.5523 1 19V5C1 4.44772 1.44772 4 2 4H16ZM7.4 8.82867C7.2067 8.82867 7.04543 8.96578 7.00813 9.14806L7 9.22867V14.7713C7 14.8474 7.02169 14.9219 7.06254 14.9861C7.16631 15.1492 7.36858 15.2116 7.54238 15.1452L7.61475 15.1088L11.9697 12.3375C12.0191 12.306 12.061 12.2641 12.0924 12.2148C12.1962 12.0517 12.1671 11.842 12.0333 11.7127L11.9697 11.6625L7.61475 8.8912C7.55057 8.85036 7.47607 8.82867 7.4 8.82867Z"
      />
    </svg>
  );
}
With react-icons
import { RiLiveFill } from "react-icons/ri";

export function Example() {
  return <RiLiveFill className="size-5" />;
}
live-fill.svg
<svg
  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="M16 4C16.5523 4 17 4.44772 17 5V9.2L22.2133 5.55071C22.4395 5.39235 22.7513 5.44737 22.9096 5.6736C22.9684 5.75764 23 5.85774 23 5.96033V18.0397C23 18.3158 22.7761 18.5397 22.5 18.5397C22.3974 18.5397 22.2973 18.5081 22.2133 18.4493L17 14.8V19C17 19.5523 16.5523 20 16 20H2C1.44772 20 1 19.5523 1 19V5C1 4.44772 1.44772 4 2 4H16ZM7.4 8.82867C7.2067 8.82867 7.04543 8.96578 7.00813 9.14806L7 9.22867V14.7713C7 14.8474 7.02169 14.9219 7.06254 14.9861C7.16631 15.1492 7.36858 15.2116 7.54238 15.1452L7.61475 15.1088L11.9697 12.3375C12.0191 12.306 12.061 12.2641 12.0924 12.2148C12.1962 12.0517 12.1671 11.842 12.0333 11.7127L11.9697 11.6625L7.61475 8.8912C7.55057 8.85036 7.47607 8.82867 7.4 8.82867Z"
  />
</svg>
Attribution
"Live Fill" icon from Remix Icon (https://github.com/Remix-Design/RemixIcon), licensed under Apache License Version 2.0.

Related icons: