moon logo
moon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- moon
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×256
- License
- CC0
The same logo in other sets
moonAkar Iconsmoon-filledAnt Design IconsmoonBootstrap IconsmoonBoxIcons v2moonBoxIcons v2 SolidmoonCarbonmoonElement Plusmoon-fillEva IconsmoonFramework7 IconsmoonFont Awesome 6 RegularmoonFont Awesome 6 SolidmoonFont Awesome RegularmoonFont Awesome SolidmoonFeather Iconsmoon-outlineFlowbite Iconsmooncss.ggmoonHeroIconsmoonHuge IconsmoonHumbleiconsmoonIconParkmoonIconPark OutlinemoonIconPark SolidmoonIconPark TwoTonemoonIonIcons
Use the moon logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><radialGradient id="SVGnL1xucik" cx="50%" cy="50%" r="49.789%" fx="50%" fy="50%"><stop offset="0%" stop-color="#4600d1"/><stop offset="49.285%" stop-color="#4600d1"/><stop offset="100%" stop-color="#35009f"/></radialGradient><radialGradient id="SVGzG1r7dEc" cx="50%" cy="50%" r="49.603%" fx="50%" fy="50%"><stop offset="0%" stop-color="#35019e"/><stop offset="18.73%" stop-color="#320194"/><stop offset="100%" stop-color="#206"/></radialGradient><circle id="SVGN5eQqeMK" cx="128" cy="128" r="128"/></defs><circle cx="128" cy="128" r="128" fill="#5805ff"/><mask id="SVGMX2wGdvm" fill="#fff"><use href="#SVGN5eQqeMK"/></mask><circle cx="199.694" cy="105.369" r="128" fill="url(#SVGnL1xucik)" mask="url(#SVGMX2wGdvm)"/><circle cx="275.372" cy="82.376" r="128" fill="url(#SVGzG1r7dEc)" mask="url(#SVGMX2wGdvm)"/></svg>
React
import type { SVGProps } from "react";
export function LogosMoon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><radialGradient id="SVGnL1xucik" cx="50%" cy="50%" r="49.789%" fx="50%" fy="50%"><stop offset="0%" stopColor="#4600d1"/><stop offset="49.285%" stopColor="#4600d1"/><stop offset="100%" stopColor="#35009f"/></radialGradient><radialGradient id="SVGzG1r7dEc" cx="50%" cy="50%" r="49.603%" fx="50%" fy="50%"><stop offset="0%" stopColor="#35019e"/><stop offset="18.73%" stopColor="#320194"/><stop offset="100%" stopColor="#206"/></radialGradient><circle id="SVGN5eQqeMK" cx="128" cy="128" r="128"/></defs><circle cx="128" cy="128" r="128" fill="#5805ff"/><mask id="SVGMX2wGdvm" fill="#fff"><use href="#SVGN5eQqeMK"/></mask><circle cx="199.694" cy="105.369" r="128" fill="url(#SVGnL1xucik)" mask="url(#SVGMX2wGdvm)"/><circle cx="275.372" cy="82.376" r="128" fill="url(#SVGzG1r7dEc)" mask="url(#SVGMX2wGdvm)"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><radialGradient id="SVGnL1xucik" cx="50%" cy="50%" r="49.789%" fx="50%" fy="50%"><stop offset="0%" stop-color="#4600d1"/><stop offset="49.285%" stop-color="#4600d1"/><stop offset="100%" stop-color="#35009f"/></radialGradient><radialGradient id="SVGzG1r7dEc" cx="50%" cy="50%" r="49.603%" fx="50%" fy="50%"><stop offset="0%" stop-color="#35019e"/><stop offset="18.73%" stop-color="#320194"/><stop offset="100%" stop-color="#206"/></radialGradient><circle id="SVGN5eQqeMK" cx="128" cy="128" r="128"/></defs><circle cx="128" cy="128" r="128" fill="#5805ff"/><mask id="SVGMX2wGdvm" fill="#fff"><use href="#SVGN5eQqeMK"/></mask><circle cx="199.694" cy="105.369" r="128" fill="url(#SVGnL1xucik)" mask="url(#SVGMX2wGdvm)"/><circle cx="275.372" cy="82.376" r="128" fill="url(#SVGzG1r7dEc)" mask="url(#SVGMX2wGdvm)"/></svg> </template>
CSS
.icon-moon {
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%20256%20256%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGnL1xucik%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2249.789%25%22%20fx%3D%2250%25%22%20fy%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234600d1%22%2F%3E%3Cstop%20offset%3D%2249.285%25%22%20stop-color%3D%22%234600d1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2335009f%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGzG1r7dEc%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2249.603%25%22%20fx%3D%2250%25%22%20fy%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2335019e%22%2F%3E%3Cstop%20offset%3D%2218.73%25%22%20stop-color%3D%22%23320194%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23206%22%2F%3E%3C%2FradialGradient%3E%3Ccircle%20id%3D%22SVGN5eQqeMK%22%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%22128%22%2F%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%22128%22%20fill%3D%22%235805ff%22%2F%3E%3Cmask%20id%3D%22SVGMX2wGdvm%22%20fill%3D%22%23fff%22%3E%3Cuse%20href%3D%22%23SVGN5eQqeMK%22%2F%3E%3C%2Fmask%3E%3Ccircle%20cx%3D%22199.694%22%20cy%3D%22105.369%22%20r%3D%22128%22%20fill%3D%22url(%23SVGnL1xucik)%22%20mask%3D%22url(%23SVGMX2wGdvm)%22%2F%3E%3Ccircle%20cx%3D%22275.372%22%20cy%3D%2282.376%22%20r%3D%22128%22%20fill%3D%22url(%23SVGzG1r7dEc)%22%20mask%3D%22url(%23SVGMX2wGdvm)%22%2F%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%20256%20256%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGnL1xucik%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2249.789%25%22%20fx%3D%2250%25%22%20fy%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234600d1%22%2F%3E%3Cstop%20offset%3D%2249.285%25%22%20stop-color%3D%22%234600d1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2335009f%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGzG1r7dEc%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2249.603%25%22%20fx%3D%2250%25%22%20fy%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2335019e%22%2F%3E%3Cstop%20offset%3D%2218.73%25%22%20stop-color%3D%22%23320194%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23206%22%2F%3E%3C%2FradialGradient%3E%3Ccircle%20id%3D%22SVGN5eQqeMK%22%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%22128%22%2F%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%22128%22%20fill%3D%22%235805ff%22%2F%3E%3Cmask%20id%3D%22SVGMX2wGdvm%22%20fill%3D%22%23fff%22%3E%3Cuse%20href%3D%22%23SVGN5eQqeMK%22%2F%3E%3C%2Fmask%3E%3Ccircle%20cx%3D%22199.694%22%20cy%3D%22105.369%22%20r%3D%22128%22%20fill%3D%22url(%23SVGnL1xucik)%22%20mask%3D%22url(%23SVGMX2wGdvm)%22%2F%3E%3Ccircle%20cx%3D%22275.372%22%20cy%3D%2282.376%22%20r%3D%22128%22%20fill%3D%22url(%23SVGzG1r7dEc)%22%20mask%3D%22url(%23SVGMX2wGdvm)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/moon.svg?color=%231a73e8&size=48
