image icon
image-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.
- Name
- image-48
- Set
- Fluent UI System Color Icons
- Style
- 48
- Viewbox
- 48×48
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
imageAkar IconsimageBootstrap IconsimageBoxIcons v2imageBoxIcons v2 SolidimageCarbonimageCatppuccin Iconsimage-fillEva IconsimageFont Awesome 6 RegularimageFont Awesome 6 SolidimageFont Awesome RegularimageFont Awesome SolidimageFeather Iconsimage-outlineFlowbite Iconsimage-16-filledFluent UI System Iconsimagecss.ggimageHumbleiconsimageIonIconsimageLine AwesomeimageMaterial Line IconsimageLucideimageMage IconsimageMajesticonsimageMaterial Icon ThemeimageMaterial Symbols
Related icons in Fluent UI System Color Icons
Use the image 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(#SVGimOoOd6T)" d="M6 12.25A6.25 6.25 0 0 1 12.25 6h23.5A6.25 6.25 0 0 1 42 12.25v23.5A6.25 6.25 0 0 1 35.75 42h-23.5A6.25 6.25 0 0 1 6 35.75z"/><path fill="url(#SVGc3F3JeCB)" d="m40.835 39.385l-14.36-14.36a3.5 3.5 0 0 0-4.95 0l-14.36 14.36A6.24 6.24 0 0 0 12.25 42h23.5a6.24 6.24 0 0 0 5.085-2.615"/><path fill="url(#SVGhRsPMdzw)" d="M27 17a4 4 0 1 1 8 0a4 4 0 0 1-8 0"/><defs><linearGradient id="SVGc3F3JeCB" x1="19.19" x2="23.289" y1="24" y2="42.935" gradientUnits="userSpaceOnUse"><stop stop-color="#b3e0ff"/><stop offset="1" stop-color="#8cd0ff"/></linearGradient><linearGradient id="SVGhRsPMdzw" x1="29.4" x2="32.323" y1="12.111" y2="22.633" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#b3e0ff"/></linearGradient><radialGradient id="SVGimOoOd6T" cx="0" cy="0" r="1" gradientTransform="rotate(51.687 10.639 -15.53)scale(99.5459 90.5437)" gradientUnits="userSpaceOnUse"><stop offset=".338" stop-color="#0fafff"/><stop offset=".529" stop-color="#367af2"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorImage48(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(#SVGimOoOd6T)" d="M6 12.25A6.25 6.25 0 0 1 12.25 6h23.5A6.25 6.25 0 0 1 42 12.25v23.5A6.25 6.25 0 0 1 35.75 42h-23.5A6.25 6.25 0 0 1 6 35.75z"/><path fill="url(#SVGc3F3JeCB)" d="m40.835 39.385l-14.36-14.36a3.5 3.5 0 0 0-4.95 0l-14.36 14.36A6.24 6.24 0 0 0 12.25 42h23.5a6.24 6.24 0 0 0 5.085-2.615"/><path fill="url(#SVGhRsPMdzw)" d="M27 17a4 4 0 1 1 8 0a4 4 0 0 1-8 0"/><defs><linearGradient id="SVGc3F3JeCB" x1="19.19" x2="23.289" y1="24" y2="42.935" gradientUnits="userSpaceOnUse"><stop stopColor="#b3e0ff"/><stop offset="1" stopColor="#8cd0ff"/></linearGradient><linearGradient id="SVGhRsPMdzw" x1="29.4" x2="32.323" y1="12.111" y2="22.633" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#b3e0ff"/></linearGradient><radialGradient id="SVGimOoOd6T" cx="0" cy="0" r="1" gradientTransform="rotate(51.687 10.639 -15.53)scale(99.5459 90.5437)" gradientUnits="userSpaceOnUse"><stop offset=".338" stopColor="#0fafff"/><stop offset=".529" stopColor="#367af2"/></radialGradient></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(#SVGimOoOd6T)" d="M6 12.25A6.25 6.25 0 0 1 12.25 6h23.5A6.25 6.25 0 0 1 42 12.25v23.5A6.25 6.25 0 0 1 35.75 42h-23.5A6.25 6.25 0 0 1 6 35.75z"/><path fill="url(#SVGc3F3JeCB)" d="m40.835 39.385l-14.36-14.36a3.5 3.5 0 0 0-4.95 0l-14.36 14.36A6.24 6.24 0 0 0 12.25 42h23.5a6.24 6.24 0 0 0 5.085-2.615"/><path fill="url(#SVGhRsPMdzw)" d="M27 17a4 4 0 1 1 8 0a4 4 0 0 1-8 0"/><defs><linearGradient id="SVGc3F3JeCB" x1="19.19" x2="23.289" y1="24" y2="42.935" gradientUnits="userSpaceOnUse"><stop stop-color="#b3e0ff"/><stop offset="1" stop-color="#8cd0ff"/></linearGradient><linearGradient id="SVGhRsPMdzw" x1="29.4" x2="32.323" y1="12.111" y2="22.633" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#b3e0ff"/></linearGradient><radialGradient id="SVGimOoOd6T" cx="0" cy="0" r="1" gradientTransform="rotate(51.687 10.639 -15.53)scale(99.5459 90.5437)" gradientUnits="userSpaceOnUse"><stop offset=".338" stop-color="#0fafff"/><stop offset=".529" stop-color="#367af2"/></radialGradient></defs></g></svg> </template>
CSS
.icon-image-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(%23SVGimOoOd6T)%22%20d%3D%22M6%2012.25A6.25%206.25%200%200%201%2012.25%206h23.5A6.25%206.25%200%200%201%2042%2012.25v23.5A6.25%206.25%200%200%201%2035.75%2042h-23.5A6.25%206.25%200%200%201%206%2035.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGc3F3JeCB)%22%20d%3D%22m40.835%2039.385l-14.36-14.36a3.5%203.5%200%200%200-4.95%200l-14.36%2014.36A6.24%206.24%200%200%200%2012.25%2042h23.5a6.24%206.24%200%200%200%205.085-2.615%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhRsPMdzw)%22%20d%3D%22M27%2017a4%204%200%201%201%208%200a4%204%200%200%201-8%200%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGc3F3JeCB%22%20x1%3D%2219.19%22%20x2%3D%2223.289%22%20y1%3D%2224%22%20y2%3D%2242.935%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b3e0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238cd0ff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGhRsPMdzw%22%20x1%3D%2229.4%22%20x2%3D%2232.323%22%20y1%3D%2212.111%22%20y2%3D%2222.633%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b3e0ff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGimOoOd6T%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(51.687%2010.639%20-15.53)scale(99.5459%2090.5437)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.338%22%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%22.529%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FradialGradient%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(%23SVGimOoOd6T)%22%20d%3D%22M6%2012.25A6.25%206.25%200%200%201%2012.25%206h23.5A6.25%206.25%200%200%201%2042%2012.25v23.5A6.25%206.25%200%200%201%2035.75%2042h-23.5A6.25%206.25%200%200%201%206%2035.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGc3F3JeCB)%22%20d%3D%22m40.835%2039.385l-14.36-14.36a3.5%203.5%200%200%200-4.95%200l-14.36%2014.36A6.24%206.24%200%200%200%2012.25%2042h23.5a6.24%206.24%200%200%200%205.085-2.615%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhRsPMdzw)%22%20d%3D%22M27%2017a4%204%200%201%201%208%200a4%204%200%200%201-8%200%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGc3F3JeCB%22%20x1%3D%2219.19%22%20x2%3D%2223.289%22%20y1%3D%2224%22%20y2%3D%2242.935%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b3e0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238cd0ff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGhRsPMdzw%22%20x1%3D%2229.4%22%20x2%3D%2232.323%22%20y1%3D%2212.111%22%20y2%3D%2222.633%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b3e0ff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGimOoOd6T%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(51.687%2010.639%20-15.53)scale(99.5459%2090.5437)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.338%22%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%22.529%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FradialGradient%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/image-48.svg?color=%231a73e8&size=48
