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

Flat Color Icons · FcDeleteDatabase

Delete Database icon

A free delete database icon from Flat Color Icons, 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 astrash icon bin icon remove icon garbage icon waste icon discard icon storage icon server icon

License: MIT license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/flat-color/delete-database.json

components/icons/flat-color-delete-database.tsx

import * as React from "react";

/**
 * Delete Database from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/flat-color/delete-database. Sized in em, colored by currentColor.
 */
export function FcDeleteDatabaseIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1"
      viewBox="0 0 48 48"
      enableBackground="new 0 0 48 48"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g fill="#D1C4E9">
        <path
          d="M38,7H10C8.9,7,8,7.9,8,9v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2V9C40,7.9,39.1,7,38,7z"
        />
        <path
          d="M38,19H10c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2v-6C40,19.9,39.1,19,38,19z"
        />
        <path
          d="M38,31H10c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2v-6C40,31.9,39.1,31,38,31z"
        />
      </g>
      <circle fill="#F44336" cx="38" cy="38" r="10" />
      <g fill="#fff">
        <rect
          x="36.5"
          y="32"
          transform="matrix(-.707 .707 -.707 -.707 91.74 38)"
          width="3"
          height="12"
        />
        <rect
          x="36.5"
          y="32"
          transform="matrix(-.707 -.707 .707 -.707 38 91.74)"
          width="3"
          height="12"
        />
      </g>
    </svg>
  );
}

With react-icons

import { FcDeleteDatabase } from "react-icons/fc";

export function Example() {
  return <FcDeleteDatabase className="size-5" />;
}

delete-database.svg

<svg
  version="1"
  viewBox="0 0 48 48"
  enable-background="new 0 0 48 48"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <g fill="#D1C4E9">
    <path
      d="M38,7H10C8.9,7,8,7.9,8,9v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2V9C40,7.9,39.1,7,38,7z"
    />
    <path
      d="M38,19H10c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2v-6C40,19.9,39.1,19,38,19z"
    />
    <path
      d="M38,31H10c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2v-6C40,31.9,39.1,31,38,31z"
    />
  </g>
  <circle fill="#F44336" cx="38" cy="38" r="10" />
  <g fill="#fff">
    <rect
      x="36.5"
      y="32"
      transform="matrix(-.707 .707 -.707 -.707 91.74 38)"
      width="3"
      height="12"
    />
    <rect
      x="36.5"
      y="32"
      transform="matrix(-.707 -.707 .707 -.707 38 91.74)"
      width="3"
      height="12"
    />
  </g>
</svg>

Attribution

"Delete Database" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.

Related icons: trash, bin, remove, garbage

Similar Flat Color Icons icons