pin icon
pin-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.
- Name
- pin-28
- Set
- Fluent UI System Color Icons
- Style
- 28
- Viewbox
- 28×28
- 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 28 28"><g fill="none"><path fill="url(#SVGXEeZKcup)" fill-rule="evenodd" d="m10.53 18.53l-6.25 6.25a.75.75 0 1 1-1.06-1.06l6.25-6.25z" clip-rule="evenodd"/><path fill="#d9d9d9" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><path fill="url(#SVG2b4WcbtV)" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><path fill="url(#SVG8epGscnK)" fill-opacity=".8" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><defs><linearGradient id="SVGXEeZKcup" x1="4.883" x2="11.694" y1="23.117" y2="17.907" gradientUnits="userSpaceOnUse"><stop offset=".449" stop-color="#7b7bff"/><stop offset="1" stop-color="#102784"/></linearGradient><linearGradient id="SVG2b4WcbtV" x1="5.774" x2="19.873" y1="6.356" y2="21.004" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><radialGradient id="SVG8epGscnK" cx="0" cy="0" r="1" gradientTransform="rotate(47.58 -11.05 33.076)scale(9.0814 22.7832)" 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 FluentColorPin28(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGXEeZKcup)" fillRule="evenodd" d="m10.53 18.53l-6.25 6.25a.75.75 0 1 1-1.06-1.06l6.25-6.25z" clipRule="evenodd"/><path fill="#d9d9d9" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><path fill="url(#SVG2b4WcbtV)" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><path fill="url(#SVG8epGscnK)" fillOpacity=".8" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><defs><linearGradient id="SVGXEeZKcup" x1="4.883" x2="11.694" y1="23.117" y2="17.907" gradientUnits="userSpaceOnUse"><stop offset=".449" stopColor="#7b7bff"/><stop offset="1" stopColor="#102784"/></linearGradient><linearGradient id="SVG2b4WcbtV" x1="5.774" x2="19.873" y1="6.356" y2="21.004" gradientUnits="userSpaceOnUse"><stop stopColor="#43e5ca"/><stop offset="1" stopColor="#1384b1"/></linearGradient><radialGradient id="SVG8epGscnK" cx="0" cy="0" r="1" gradientTransform="rotate(47.58 -11.05 33.076)scale(9.0814 22.7832)" 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 28 28"><g fill="none"><path fill="url(#SVGXEeZKcup)" fill-rule="evenodd" d="m10.53 18.53l-6.25 6.25a.75.75 0 1 1-1.06-1.06l6.25-6.25z" clip-rule="evenodd"/><path fill="#d9d9d9" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><path fill="url(#SVG2b4WcbtV)" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><path fill="url(#SVG8epGscnK)" fill-opacity=".8" d="M19.039 3.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553 5.39a1.75 1.75 0 0 1-.953.884l-4.13 1.588a1.75 1.75 0 0 0-.61 2.871l7.324 7.324a1.75 1.75 0 0 0 2.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962 2.496-3.646.907-5.235z"/><defs><linearGradient id="SVGXEeZKcup" x1="4.883" x2="11.694" y1="23.117" y2="17.907" gradientUnits="userSpaceOnUse"><stop offset=".449" stop-color="#7b7bff"/><stop offset="1" stop-color="#102784"/></linearGradient><linearGradient id="SVG2b4WcbtV" x1="5.774" x2="19.873" y1="6.356" y2="21.004" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><radialGradient id="SVG8epGscnK" cx="0" cy="0" r="1" gradientTransform="rotate(47.58 -11.05 33.076)scale(9.0814 22.7832)" gradientUnits="userSpaceOnUse"><stop stop-color="#e362f8"/><stop offset="1" stop-color="#96f" stop-opacity="0"/></radialGradient></defs></g></svg> </template>
CSS
.icon-pin-28 {
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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGXEeZKcup)%22%20fill-rule%3D%22evenodd%22%20d%3D%22m10.53%2018.53l-6.25%206.25a.75.75%200%201%201-1.06-1.06l6.25-6.25z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M19.039%203.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553%205.39a1.75%201.75%200%200%201-.953.884l-4.13%201.588a1.75%201.75%200%200%200-.61%202.871l7.324%207.324a1.75%201.75%200%200%200%202.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962%202.496-3.646.907-5.235z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2b4WcbtV)%22%20d%3D%22M19.039%203.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553%205.39a1.75%201.75%200%200%201-.953.884l-4.13%201.588a1.75%201.75%200%200%200-.61%202.871l7.324%207.324a1.75%201.75%200%200%200%202.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962%202.496-3.646.907-5.235z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8epGscnK)%22%20fill-opacity%3D%22.8%22%20d%3D%22M19.039%203.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553%205.39a1.75%201.75%200%200%201-.953.884l-4.13%201.588a1.75%201.75%200%200%200-.61%202.871l7.324%207.324a1.75%201.75%200%200%200%202.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962%202.496-3.646.907-5.235z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGXEeZKcup%22%20x1%3D%224.883%22%20x2%3D%2211.694%22%20y1%3D%2223.117%22%20y2%3D%2217.907%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%22SVG2b4WcbtV%22%20x1%3D%225.774%22%20x2%3D%2219.873%22%20y1%3D%226.356%22%20y2%3D%2221.004%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%22SVG8epGscnK%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.58%20-11.05%2033.076)scale(9.0814%2022.7832)%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGXEeZKcup)%22%20fill-rule%3D%22evenodd%22%20d%3D%22m10.53%2018.53l-6.25%206.25a.75.75%200%201%201-1.06-1.06l6.25-6.25z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M19.039%203.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553%205.39a1.75%201.75%200%200%201-.953.884l-4.13%201.588a1.75%201.75%200%200%200-.61%202.871l7.324%207.324a1.75%201.75%200%200%200%202.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962%202.496-3.646.907-5.235z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2b4WcbtV)%22%20d%3D%22M19.039%203.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553%205.39a1.75%201.75%200%200%201-.953.884l-4.13%201.588a1.75%201.75%200%200%200-.61%202.871l7.324%207.324a1.75%201.75%200%200%200%202.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962%202.496-3.646.907-5.235z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8epGscnK)%22%20fill-opacity%3D%22.8%22%20d%3D%22M19.039%203.478c-1.59-1.59-4.274-1.124-5.236.907l-2.553%205.39a1.75%201.75%200%200%201-.953.884l-4.13%201.588a1.75%201.75%200%200%200-.61%202.871l7.324%207.324a1.75%201.75%200%200%200%202.871-.61l1.589-4.13c.161-.419.478-.76.884-.953l5.39-2.553c2.031-.962%202.496-3.646.907-5.235z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGXEeZKcup%22%20x1%3D%224.883%22%20x2%3D%2211.694%22%20y1%3D%2223.117%22%20y2%3D%2217.907%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%22SVG2b4WcbtV%22%20x1%3D%225.774%22%20x2%3D%2219.873%22%20y1%3D%226.356%22%20y2%3D%2221.004%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%22SVG8epGscnK%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.58%20-11.05%2033.076)scale(9.0814%2022.7832)%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-28.svg?color=%231a73e8&size=48
