database-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.

Name
database-48
Set
Fluent UI System Color Icons
Style
48
Viewbox
48×48
License
MIT

4 other variants in Fluent UI System Color Icons

The same icon in other sets

Use the database icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGYughCdDy)" d="M8 12c1.206 1.173 2.677 2.049 4.01 2.659c3.262 1.492 7.505 2.317 11.99 2.317s8.728-.825 11.99-2.317c1.333-.61 2.804-1.486 4.01-2.659v24.25h-.007c-.139 2.527-2.373 4.438-5.043 5.66C32.083 43.222 28.21 44 24 44s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z"/><path fill="url(#SVGVyjGhbns)" fill-opacity=".7" d="M8 12c1.206 1.173 2.677 2.049 4.01 2.659c3.262 1.492 7.505 2.317 11.99 2.317s8.728-.825 11.99-2.317c1.333-.61 2.804-1.486 4.01-2.659v24.25h-.007c-.139 2.527-2.373 4.438-5.043 5.66C32.083 43.222 28.21 44 24 44s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z"/><path fill="url(#SVGLGJD5c4l)" d="M13.05 6.09C15.917 4.778 19.79 4 24 4s8.083.778 10.95 2.09C37.707 7.352 40 9.35 40 12s-2.293 4.648-5.05 5.91C32.083 19.22 28.21 20 24 20s-8.083-.779-10.95-2.09C10.293 16.648 8 14.65 8 12s2.293-4.648 5.05-5.91"/><defs><linearGradient id="SVGYughCdDy" x1="15.555" x2="32.87" y1="4.791" y2="41.153" gradientUnits="userSpaceOnUse"><stop stop-color="#29c3ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGVyjGhbns" x1="28.952" x2="35.294" y1="15.93" y2="47.442" gradientUnits="userSpaceOnUse"><stop offset=".533" stop-color="#ff6ce8" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8"/></linearGradient><linearGradient id="SVGLGJD5c4l" x1="52" x2="33.509" y1="28" y2="-5.657" gradientUnits="userSpaceOnUse"><stop stop-color="#58aafe"/><stop offset="1" stop-color="#6ce0ff"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorDatabase48(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGYughCdDy)" d="M8 12c1.206 1.173 2.677 2.049 4.01 2.659c3.262 1.492 7.505 2.317 11.99 2.317s8.728-.825 11.99-2.317c1.333-.61 2.804-1.486 4.01-2.659v24.25h-.007c-.139 2.527-2.373 4.438-5.043 5.66C32.083 43.222 28.21 44 24 44s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z"/><path fill="url(#SVGVyjGhbns)" fillOpacity=".7" d="M8 12c1.206 1.173 2.677 2.049 4.01 2.659c3.262 1.492 7.505 2.317 11.99 2.317s8.728-.825 11.99-2.317c1.333-.61 2.804-1.486 4.01-2.659v24.25h-.007c-.139 2.527-2.373 4.438-5.043 5.66C32.083 43.222 28.21 44 24 44s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z"/><path fill="url(#SVGLGJD5c4l)" d="M13.05 6.09C15.917 4.778 19.79 4 24 4s8.083.778 10.95 2.09C37.707 7.352 40 9.35 40 12s-2.293 4.648-5.05 5.91C32.083 19.22 28.21 20 24 20s-8.083-.779-10.95-2.09C10.293 16.648 8 14.65 8 12s2.293-4.648 5.05-5.91"/><defs><linearGradient id="SVGYughCdDy" x1="15.555" x2="32.87" y1="4.791" y2="41.153" gradientUnits="userSpaceOnUse"><stop stopColor="#29c3ff"/><stop offset="1" stopColor="#367af2"/></linearGradient><linearGradient id="SVGVyjGhbns" x1="28.952" x2="35.294" y1="15.93" y2="47.442" gradientUnits="userSpaceOnUse"><stop offset=".533" stopColor="#ff6ce8" stopOpacity="0"/><stop offset="1" stopColor="#ff6ce8"/></linearGradient><linearGradient id="SVGLGJD5c4l" x1="52" x2="33.509" y1="28" y2="-5.657" gradientUnits="userSpaceOnUse"><stop stopColor="#58aafe"/><stop offset="1" stopColor="#6ce0ff"/></linearGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGYughCdDy)" d="M8 12c1.206 1.173 2.677 2.049 4.01 2.659c3.262 1.492 7.505 2.317 11.99 2.317s8.728-.825 11.99-2.317c1.333-.61 2.804-1.486 4.01-2.659v24.25h-.007c-.139 2.527-2.373 4.438-5.043 5.66C32.083 43.222 28.21 44 24 44s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z"/><path fill="url(#SVGVyjGhbns)" fill-opacity=".7" d="M8 12c1.206 1.173 2.677 2.049 4.01 2.659c3.262 1.492 7.505 2.317 11.99 2.317s8.728-.825 11.99-2.317c1.333-.61 2.804-1.486 4.01-2.659v24.25h-.007c-.139 2.527-2.373 4.438-5.043 5.66C32.083 43.222 28.21 44 24 44s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z"/><path fill="url(#SVGLGJD5c4l)" d="M13.05 6.09C15.917 4.778 19.79 4 24 4s8.083.778 10.95 2.09C37.707 7.352 40 9.35 40 12s-2.293 4.648-5.05 5.91C32.083 19.22 28.21 20 24 20s-8.083-.779-10.95-2.09C10.293 16.648 8 14.65 8 12s2.293-4.648 5.05-5.91"/><defs><linearGradient id="SVGYughCdDy" x1="15.555" x2="32.87" y1="4.791" y2="41.153" gradientUnits="userSpaceOnUse"><stop stop-color="#29c3ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGVyjGhbns" x1="28.952" x2="35.294" y1="15.93" y2="47.442" gradientUnits="userSpaceOnUse"><stop offset=".533" stop-color="#ff6ce8" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8"/></linearGradient><linearGradient id="SVGLGJD5c4l" x1="52" x2="33.509" y1="28" y2="-5.657" gradientUnits="userSpaceOnUse"><stop stop-color="#58aafe"/><stop offset="1" stop-color="#6ce0ff"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-database-48 {
  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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGYughCdDy)%22%20d%3D%22M8%2012c1.206%201.173%202.677%202.049%204.01%202.659c3.262%201.492%207.505%202.317%2011.99%202.317s8.728-.825%2011.99-2.317c1.333-.61%202.804-1.486%204.01-2.659v24.25h-.007c-.139%202.527-2.373%204.438-5.043%205.66C32.083%2043.222%2028.21%2044%2024%2044s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVyjGhbns)%22%20fill-opacity%3D%22.7%22%20d%3D%22M8%2012c1.206%201.173%202.677%202.049%204.01%202.659c3.262%201.492%207.505%202.317%2011.99%202.317s8.728-.825%2011.99-2.317c1.333-.61%202.804-1.486%204.01-2.659v24.25h-.007c-.139%202.527-2.373%204.438-5.043%205.66C32.083%2043.222%2028.21%2044%2024%2044s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLGJD5c4l)%22%20d%3D%22M13.05%206.09C15.917%204.778%2019.79%204%2024%204s8.083.778%2010.95%202.09C37.707%207.352%2040%209.35%2040%2012s-2.293%204.648-5.05%205.91C32.083%2019.22%2028.21%2020%2024%2020s-8.083-.779-10.95-2.09C10.293%2016.648%208%2014.65%208%2012s2.293-4.648%205.05-5.91%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGYughCdDy%22%20x1%3D%2215.555%22%20x2%3D%2232.87%22%20y1%3D%224.791%22%20y2%3D%2241.153%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2329c3ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGVyjGhbns%22%20x1%3D%2228.952%22%20x2%3D%2235.294%22%20y1%3D%2215.93%22%20y2%3D%2247.442%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.533%22%20stop-color%3D%22%23ff6ce8%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff6ce8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGLGJD5c4l%22%20x1%3D%2252%22%20x2%3D%2233.509%22%20y1%3D%2228%22%20y2%3D%22-5.657%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2358aafe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236ce0ff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGYughCdDy)%22%20d%3D%22M8%2012c1.206%201.173%202.677%202.049%204.01%202.659c3.262%201.492%207.505%202.317%2011.99%202.317s8.728-.825%2011.99-2.317c1.333-.61%202.804-1.486%204.01-2.659v24.25h-.007c-.139%202.527-2.373%204.438-5.043%205.66C32.083%2043.222%2028.21%2044%2024%2044s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVyjGhbns)%22%20fill-opacity%3D%22.7%22%20d%3D%22M8%2012c1.206%201.173%202.677%202.049%204.01%202.659c3.262%201.492%207.505%202.317%2011.99%202.317s8.728-.825%2011.99-2.317c1.333-.61%202.804-1.486%204.01-2.659v24.25h-.007c-.139%202.527-2.373%204.438-5.043%205.66C32.083%2043.222%2028.21%2044%2024%2044s-8.083-.779-10.95-2.09c-2.67-1.222-4.904-3.133-5.043-5.66H8z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLGJD5c4l)%22%20d%3D%22M13.05%206.09C15.917%204.778%2019.79%204%2024%204s8.083.778%2010.95%202.09C37.707%207.352%2040%209.35%2040%2012s-2.293%204.648-5.05%205.91C32.083%2019.22%2028.21%2020%2024%2020s-8.083-.779-10.95-2.09C10.293%2016.648%208%2014.65%208%2012s2.293-4.648%205.05-5.91%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGYughCdDy%22%20x1%3D%2215.555%22%20x2%3D%2232.87%22%20y1%3D%224.791%22%20y2%3D%2241.153%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2329c3ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGVyjGhbns%22%20x1%3D%2228.952%22%20x2%3D%2235.294%22%20y1%3D%2215.93%22%20y2%3D%2247.442%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.533%22%20stop-color%3D%22%23ff6ce8%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff6ce8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGLGJD5c4l%22%20x1%3D%2252%22%20x2%3D%2233.509%22%20y1%3D%2228%22%20y2%3D%22-5.657%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2358aafe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236ce0ff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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