pin icon
pin-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.
- Name
- pin-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
pinAkar IconspinBootstrap IconspinBoxIcons v2pinBoxIcons v2 SolidpinCarbonpinCodiconspin-fillEva IconspinFramework7 Iconspin-12-filledFluent UI System Iconspincss.ggpinHuge IconspinIconParkpinIconPark OutlinepinIconPark SolidpinIconPark TwoTonepinIconoirpinIonIconspinJam IconspinLucidepinMage IconspinMajesticonspinMaterial SymbolspinMaterial Symbols LightpinMaterial Design Icons
Use the pin 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(#SVG0uwsEbAE)" fill-rule="evenodd" d="m18.884 30.884l-10.75 10.75a1.25 1.25 0 0 1-1.768-1.768l10.75-10.75z" clip-rule="evenodd"/><path fill="#d9d9d9" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><path fill="url(#SVG7xDpce6X)" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><path fill="url(#SVGIz1JBcGo)" fill-opacity=".8" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><defs><linearGradient id="SVG0uwsEbAE" x1="9.221" x2="19.553" y1="38.778" y2="30.876" gradientUnits="userSpaceOnUse"><stop offset=".449" stop-color="#7b7bff"/><stop offset="1" stop-color="#102784"/></linearGradient><linearGradient id="SVG7xDpce6X" x1="9.864" x2="34.182" y1="10.765" y2="36.03" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><radialGradient id="SVGIz1JBcGo" cx="0" cy="0" r="1" gradientTransform="rotate(47.58 -18.881 56.842)scale(15.6635 39.2962)" gradientUnits="userSpaceOnUse"><stop stop-color="#e362f8"/><stop offset="1" stop-color="#96f" stop-opacity="0"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorPin48(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(#SVG0uwsEbAE)" fillRule="evenodd" d="m18.884 30.884l-10.75 10.75a1.25 1.25 0 0 1-1.768-1.768l10.75-10.75z" clipRule="evenodd"/><path fill="#d9d9d9" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><path fill="url(#SVG7xDpce6X)" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><path fill="url(#SVGIz1JBcGo)" fillOpacity=".8" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><defs><linearGradient id="SVG0uwsEbAE" x1="9.221" x2="19.553" y1="38.778" y2="30.876" gradientUnits="userSpaceOnUse"><stop offset=".449" stopColor="#7b7bff"/><stop offset="1" stopColor="#102784"/></linearGradient><linearGradient id="SVG7xDpce6X" x1="9.864" x2="34.182" y1="10.765" y2="36.03" gradientUnits="userSpaceOnUse"><stop stopColor="#43e5ca"/><stop offset="1" stopColor="#1384b1"/></linearGradient><radialGradient id="SVGIz1JBcGo" cx="0" cy="0" r="1" gradientTransform="rotate(47.58 -18.881 56.842)scale(15.6635 39.2962)" gradientUnits="userSpaceOnUse"><stop stopColor="#e362f8"/><stop offset="1" stopColor="#96f" stopOpacity="0"/></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(#SVG0uwsEbAE)" fill-rule="evenodd" d="m18.884 30.884l-10.75 10.75a1.25 1.25 0 0 1-1.768-1.768l10.75-10.75z" clip-rule="evenodd"/><path fill="#d9d9d9" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><path fill="url(#SVG7xDpce6X)" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><path fill="url(#SVGIz1JBcGo)" fill-opacity=".8" d="M31.818 5.55L42.45 16.182c2.293 2.293 1.666 6.158-1.234 7.608l-10.545 5.272a1.25 1.25 0 0 0-.622.71l-2.684 7.77c-.663 1.92-3.108 2.483-4.544 1.046L9.412 25.18c-1.436-1.436-.873-3.88 1.047-4.543l7.77-2.685a1.25 1.25 0 0 0 .71-.622L24.21 6.784c1.45-2.9 5.314-3.527 7.607-1.234"/><defs><linearGradient id="SVG0uwsEbAE" x1="9.221" x2="19.553" y1="38.778" y2="30.876" gradientUnits="userSpaceOnUse"><stop offset=".449" stop-color="#7b7bff"/><stop offset="1" stop-color="#102784"/></linearGradient><linearGradient id="SVG7xDpce6X" x1="9.864" x2="34.182" y1="10.765" y2="36.03" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><radialGradient id="SVGIz1JBcGo" cx="0" cy="0" r="1" gradientTransform="rotate(47.58 -18.881 56.842)scale(15.6635 39.2962)" gradientUnits="userSpaceOnUse"><stop stop-color="#e362f8"/><stop offset="1" stop-color="#96f" stop-opacity="0"/></radialGradient></defs></g></svg> </template>
CSS
.icon-pin-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(%23SVG0uwsEbAE)%22%20fill-rule%3D%22evenodd%22%20d%3D%22m18.884%2030.884l-10.75%2010.75a1.25%201.25%200%200%201-1.768-1.768l10.75-10.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M31.818%205.55L42.45%2016.182c2.293%202.293%201.666%206.158-1.234%207.608l-10.545%205.272a1.25%201.25%200%200%200-.622.71l-2.684%207.77c-.663%201.92-3.108%202.483-4.544%201.046L9.412%2025.18c-1.436-1.436-.873-3.88%201.047-4.543l7.77-2.685a1.25%201.25%200%200%200%20.71-.622L24.21%206.784c1.45-2.9%205.314-3.527%207.607-1.234%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7xDpce6X)%22%20d%3D%22M31.818%205.55L42.45%2016.182c2.293%202.293%201.666%206.158-1.234%207.608l-10.545%205.272a1.25%201.25%200%200%200-.622.71l-2.684%207.77c-.663%201.92-3.108%202.483-4.544%201.046L9.412%2025.18c-1.436-1.436-.873-3.88%201.047-4.543l7.77-2.685a1.25%201.25%200%200%200%20.71-.622L24.21%206.784c1.45-2.9%205.314-3.527%207.607-1.234%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIz1JBcGo)%22%20fill-opacity%3D%22.8%22%20d%3D%22M31.818%205.55L42.45%2016.182c2.293%202.293%201.666%206.158-1.234%207.608l-10.545%205.272a1.25%201.25%200%200%200-.622.71l-2.684%207.77c-.663%201.92-3.108%202.483-4.544%201.046L9.412%2025.18c-1.436-1.436-.873-3.88%201.047-4.543l7.77-2.685a1.25%201.25%200%200%200%20.71-.622L24.21%206.784c1.45-2.9%205.314-3.527%207.607-1.234%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG0uwsEbAE%22%20x1%3D%229.221%22%20x2%3D%2219.553%22%20y1%3D%2238.778%22%20y2%3D%2230.876%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.449%22%20stop-color%3D%22%237b7bff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23102784%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG7xDpce6X%22%20x1%3D%229.864%22%20x2%3D%2234.182%22%20y1%3D%2210.765%22%20y2%3D%2236.03%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2343e5ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231384b1%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGIz1JBcGo%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.58%20-18.881%2056.842)scale(15.6635%2039.2962)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e362f8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2396f%22%20stop-opacity%3D%220%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(%23SVG0uwsEbAE)%22%20fill-rule%3D%22evenodd%22%20d%3D%22m18.884%2030.884l-10.75%2010.75a1.25%201.25%200%200%201-1.768-1.768l10.75-10.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M31.818%205.55L42.45%2016.182c2.293%202.293%201.666%206.158-1.234%207.608l-10.545%205.272a1.25%201.25%200%200%200-.622.71l-2.684%207.77c-.663%201.92-3.108%202.483-4.544%201.046L9.412%2025.18c-1.436-1.436-.873-3.88%201.047-4.543l7.77-2.685a1.25%201.25%200%200%200%20.71-.622L24.21%206.784c1.45-2.9%205.314-3.527%207.607-1.234%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7xDpce6X)%22%20d%3D%22M31.818%205.55L42.45%2016.182c2.293%202.293%201.666%206.158-1.234%207.608l-10.545%205.272a1.25%201.25%200%200%200-.622.71l-2.684%207.77c-.663%201.92-3.108%202.483-4.544%201.046L9.412%2025.18c-1.436-1.436-.873-3.88%201.047-4.543l7.77-2.685a1.25%201.25%200%200%200%20.71-.622L24.21%206.784c1.45-2.9%205.314-3.527%207.607-1.234%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIz1JBcGo)%22%20fill-opacity%3D%22.8%22%20d%3D%22M31.818%205.55L42.45%2016.182c2.293%202.293%201.666%206.158-1.234%207.608l-10.545%205.272a1.25%201.25%200%200%200-.622.71l-2.684%207.77c-.663%201.92-3.108%202.483-4.544%201.046L9.412%2025.18c-1.436-1.436-.873-3.88%201.047-4.543l7.77-2.685a1.25%201.25%200%200%200%20.71-.622L24.21%206.784c1.45-2.9%205.314-3.527%207.607-1.234%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG0uwsEbAE%22%20x1%3D%229.221%22%20x2%3D%2219.553%22%20y1%3D%2238.778%22%20y2%3D%2230.876%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.449%22%20stop-color%3D%22%237b7bff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23102784%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG7xDpce6X%22%20x1%3D%229.864%22%20x2%3D%2234.182%22%20y1%3D%2210.765%22%20y2%3D%2236.03%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2343e5ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231384b1%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGIz1JBcGo%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.58%20-18.881%2056.842)scale(15.6635%2039.2962)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e362f8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2396f%22%20stop-opacity%3D%220%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/pin-48.svg?color=%231a73e8&size=48
