Document Database icon
Used to represent general file types and actions. The Document Database icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Document Database icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { DocumentDatabase24Regular, DocumentDatabase24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentDatabase24Regular aria-label="Document Database" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_database_24_regular.svg" width="24" height="24" alt="Document Database"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 20C18.5 20.275 18.276 20.5 18 20.5H12C12 21.0807 11.7907 21.5803 11.4671 22H18C19.104 22 20 21.104 20 20V9.828C20 9.298 19.789 8.789 19.414 8.414L13.585 2.586C13.2194 2.22035 12.6865 2 12.172 2H6C4.896 2 4 2.896 4 4V11.1871C4.47816 11.0942 4.98169 11.0346 5.5 11.0112V4C5.5 3.725 5.724 3.5 6 3.5H12V8C12 9.104 12.896 10 14 10H18.5V20ZM13.5 4.621L17.378 8.5H14C13.724 8.5 13.5 8.275 13.5 8V4.621ZM10.4076 21.6814C9.56431 22.4663 7.90681 23 6 23C3.94968 23 2.1876 22.383 1.41604 21.5C1.14845 21.1938 1 20.8556 1 20.5V16.4917C1.30982 16.7619 1.66323 16.9852 2.01725 17.1622C3.08819 17.6977 4.49771 18 6 18C6.51415 18 7.01743 17.9646 7.49999 17.8965C8.02925 17.8219 8.53358 17.708 8.99999 17.5585C9.35089 17.446 9.68032 17.3134 9.98275 17.1622C10.3368 16.9852 10.6902 16.7619 11 16.4917V20.5C11 20.9273 10.7856 21.3296 10.4076 21.6814ZM5.5 12.0123C5.66445 12.0042 5.83125 12 6 12C6.5226 12 7.02648 12.0401 7.49999 12.1144C8.04636 12.2003 8.55232 12.3317 8.99999 12.4998C10.2144 12.9559 11 13.6821 11 14.5C11 15.3179 10.2144 16.0441 8.99999 16.5002C8.55232 16.6683 8.04636 16.7997 7.49999 16.8855C7.02648 16.9599 6.5226 17 6 17C3.23858 17 1 15.8807 1 14.5C1 13.4748 2.2341 12.5938 4 12.208C4.46712 12.106 4.97145 12.0386 5.5 12.0123Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/document_database_24_regular.svg";Details
| Name | Document Database |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_database_24_regular.svg |
| Filled file | ic_fluent_document_database_24_filled.svg |
| React components | DocumentDatabase24Regular, DocumentDatabase24Filled |
| License | MIT (© Microsoft Corporation) |