Database Link icon
Used in database scenarios. The Database Link 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 Database Link 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 { DatabaseLink24Regular, DatabaseLink24Filled } from "@fluentui/react-icons";
export function Example() {
return <DatabaseLink24Regular aria-label="Database Link" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_database_link_24_regular.svg" width="24" height="24" alt="Database Link"> 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="M4 6V18C4 18.6906 4.3153 19.2934 4.77423 19.7798C5.2294 20.2622 5.85301 20.6626 6.56668 20.9825C7.99575 21.6231 9.91738 22 12 22C12.5109 22 13.0121 21.9773 13.4987 21.9336C12.8538 21.5859 12.2984 21.0933 11.8762 20.4995C10.0055 20.4848 8.34946 20.1378 7.18027 19.6137C6.58195 19.3455 6.14382 19.0456 5.86525 18.7503C5.59044 18.4591 5.5 18.2069 5.5 18V8.39242C5.82094 8.61282 6.18063 8.80942 6.56668 8.98248C7.99575 9.6231 9.91738 10 12 10C14.0826 10 16.0042 9.6231 17.4333 8.98248C17.8194 8.80942 18.1791 8.61282 18.5 8.39242V13H19.25C19.5052 13 19.7557 13.0201 20 13.0589V6C20 5.30945 19.6847 4.70664 19.2258 4.22025C18.7706 3.73784 18.147 3.33745 17.4333 3.01752C16.0042 2.3769 14.0826 2 12 2C9.91738 2 7.99575 2.3769 6.56668 3.01752C5.85301 3.33745 5.2294 3.73784 4.77423 4.22025C4.3153 4.70664 4 5.30945 4 6ZM5.5 6C5.5 5.79309 5.59044 5.54091 5.86525 5.24966C6.14382 4.95441 6.58195 4.65449 7.18027 4.38628C8.37519 3.85063 10.0786 3.5 12 3.5C13.9214 3.5 15.6248 3.85063 16.8197 4.38628C17.418 4.65449 17.8562 4.95441 18.1348 5.24966C18.4096 5.54091 18.5 5.79309 18.5 6C18.5 6.20691 18.4096 6.45909 18.1348 6.75034C17.8562 7.04559 17.418 7.3455 16.8197 7.61372C15.6248 8.14937 13.9214 8.5 12 8.5C10.0786 8.5 8.37519 8.14937 7.18027 7.61372C6.58195 7.3455 6.14382 7.04559 5.86525 6.75034C5.59044 6.45909 5.5 6.20691 5.5 6ZM23 17.75C23 15.6789 21.3211 14 19.25 14L19.1482 14.0068C18.7822 14.0565 18.5 14.3703 18.5 14.75C18.5 15.1642 18.8358 15.5 19.25 15.5L19.404 15.5052C20.5748 15.5844 21.5 16.5591 21.5 17.75C21.5 18.9926 20.4926 20 19.25 20L19.2466 20.0046L19.1448 20.0119C18.779 20.0633 18.4983 20.3783 18.5 20.758C18.5019 21.1722 18.8392 21.5065 19.2534 21.5046V21.5L19.4523 21.4948C21.4276 21.3913 23 19.7543 23 17.75ZM16.5 14.75C16.5 14.3358 16.1642 14 15.75 14L15.5508 14.0052C13.5724 14.1087 12 15.7457 12 17.75C12 19.8211 13.6789 21.5 15.75 21.5L15.8518 21.4932C16.2178 21.4435 16.5 21.1297 16.5 20.75C16.5 20.3358 16.1642 20 15.75 20L15.596 19.9948C14.4252 19.9156 13.5 18.9409 13.5 17.75C13.5 16.5074 14.5074 15.5 15.75 15.5L15.8518 15.4932C16.2178 15.4435 16.5 15.1297 16.5 14.75ZM20 17.75C20 17.3358 19.6642 17 19.25 17H15.75L15.6482 17.0068C15.2822 17.0565 15 17.3703 15 17.75C15 18.1642 15.3358 18.5 15.75 18.5H19.25L19.3518 18.4932C19.7178 18.4435 20 18.1297 20 17.75Z" 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/database_link_24_regular.svg";Details
| Name | Database Link |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_database_link_24_regular.svg |
| Filled file | ic_fluent_database_link_24_filled.svg |
| React components | DatabaseLink24Regular, DatabaseLink24Filled |
| License | MIT (© Microsoft Corporation) |