database icon

database-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: database-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

database database-bold database-duotone database-fill database-thin

Use the database icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 26c-52.71 0-94 23.72-94 54v96c0 30.28 41.29 54 94 54s94-23.72 94-54V80c0-30.28-41.29-54-94-54m0 12c44.45 0 82 19.23 82 42s-37.55 42-82 42s-82-19.23-82-42s37.55-42 82-42m82 138c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 171.16 92.37 182 128 182s66-10.84 82-27.21Zm0-48c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 123.16 92.37 134 128 134s66-10.84 82-27.21Z"/></svg>

React

import type { SVGProps } from "react";

export function PhDatabaseLight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 26c-52.71 0-94 23.72-94 54v96c0 30.28 41.29 54 94 54s94-23.72 94-54V80c0-30.28-41.29-54-94-54m0 12c44.45 0 82 19.23 82 42s-37.55 42-82 42s-82-19.23-82-42s37.55-42 82-42m82 138c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 171.16 92.37 182 128 182s66-10.84 82-27.21Zm0-48c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 123.16 92.37 134 128 134s66-10.84 82-27.21Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 26c-52.71 0-94 23.72-94 54v96c0 30.28 41.29 54 94 54s94-23.72 94-54V80c0-30.28-41.29-54-94-54m0 12c44.45 0 82 19.23 82 42s-37.55 42-82 42s-82-19.23-82-42s37.55-42 82-42m82 138c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 171.16 92.37 182 128 182s66-10.84 82-27.21Zm0-48c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 123.16 92.37 134 128 134s66-10.84 82-27.21Z"/></svg>
</template>

CSS

.icon-database-light {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2026c-52.71%200-94%2023.72-94%2054v96c0%2030.28%2041.29%2054%2094%2054s94-23.72%2094-54V80c0-30.28-41.29-54-94-54m0%2012c44.45%200%2082%2019.23%2082%2042s-37.55%2042-82%2042s-82-19.23-82-42s37.55-42%2082-42m82%20138c0%2022.77-37.55%2042-82%2042s-82-19.23-82-42v-21.21C62%20171.16%2092.37%20182%20128%20182s66-10.84%2082-27.21Zm0-48c0%2022.77-37.55%2042-82%2042s-82-19.23-82-42v-21.21C62%20123.16%2092.37%20134%20128%20134s66-10.84%2082-27.21Z%22%2F%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2026c-52.71%200-94%2023.72-94%2054v96c0%2030.28%2041.29%2054%2094%2054s94-23.72%2094-54V80c0-30.28-41.29-54-94-54m0%2012c44.45%200%2082%2019.23%2082%2042s-37.55%2042-82%2042s-82-19.23-82-42s37.55-42%2082-42m82%20138c0%2022.77-37.55%2042-82%2042s-82-19.23-82-42v-21.21C62%20171.16%2092.37%20182%20128%20182s66-10.84%2082-27.21Zm0-48c0%2022.77-37.55%2042-82%2042s-82-19.23-82-42v-21.21C62%20123.16%2092.37%20134%20128%20134s66-10.84%2082-27.21Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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

database icon

5 other variants in Phosphor

The same icon in other sets

Use the database icon

SVG

React

Vue

CSS