How to use the Macau icon
import { MacauFlag } from "@/assets/icons/macauFlag"
export default function Example() {
return <MacauFlag width="32px" height="32px" />
}Flags icon
Macau JSX Icon
Copy the Macau icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentMacauFlag
FilemacauFlag.jsx
CategoryFlags
Copy-ready code
Macau React JSX component
// Source: https://raw.githubusercontent.com/lipis/flag-icons/086f7e97d657358203916dbe84f61c2bccaa81eb/flags/4x3/mo.svg
// Asset license: flag-icons MIT. Country flags are national symbols; use respectfully and verify local requirements where applicable.
export const MacauFlag = ({ width = "40px", height = "30px", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet">
<path fill="#00785e" d="M0 0h640v480H0z"/>
<path fill="#fbd116" d="m295 108.7 40.5 29.5L320 90.5l-15.5 47.7 40.6-29.5z"/>
<g id="mo-a">
<path fill="#fff" d="M320 331.6H217.5l-3.8-4H320a2 2 0 0 1 1.4 2q0 1.4-1.4 2m0-31.3a13 13 0 0 0 1.2-7.6 12 12 0 0 0-1.2-3.8 82 82 0 0 1-32.5 19 81 81 0 0 1-23.5 3.5h-63.1l5.8 8h61c20 0 38.2-7.2 52.3-19.1m-109.6-24.7a32 32 0 0 1-9.7 2 81 81 0 0 0 60.8 27.5 81 81 0 0 0 58.5-25 441 441 0 0 0 4.5-58.8 441 441 0 0 0-4.5-67.7c-6.6 6-19 18.7-24.8 38.3A81 81 0 0 0 292 215a81 81 0 0 0 13.7 45 81 81 0 0 1-17-49.5q.1-18.8 7.8-34.7a33 33 0 0 1-7.5-13 81 81 0 0 0-10.5 40c0 18 5.9 34.7 15.9 48.1a95 95 0 0 0-73.4-29.4 33 33 0 0 1 6.8 8.9 95 95 0 0 1 68.6 29.4 95 95 0 0 0-61-22.2 95 95 0 0 0-36.7 7.3 81 81 0 0 0 82.6 52.2q-7 1.3-14.4 1.3a81 81 0 0 1-56.4-22.8zM320 364.4h-53.1a144 144 0 0 0 53.1 10.1 11 11 0 0 0 1.3-5 11 11 0 0 0-1.3-5.1m0-24.5h-93.6l7.8 6.2H320a5 5 0 0 0 1.3-3.1 4 4 0 0 0-1.3-3.1m0 12.5h-76.7a144 144 0 0 0 14.4 8H320a8 8 0 0 0 1.2-4.2 8 8 0 0 0-1.2-3.8"/>
<path fill="#fbd116" d="m200.5 174.8 25.4 23.6-6.7-34-14.6 31.4 30.3-16.8zm36.9-32 34.7.6-27.7-21 10.1 33.3 11.3-32.9z"/>
</g>
<use href="#mo-a" width="100%" height="100%" transform="matrix(-1 0 0 1 640 0)"/>
</svg>
)
Built for the web
Use it in your stack
This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.
Looking for a similar mark? Browse the related icons below or explore the full flags collection.
Related JSX icons
FAQ
Is the Macau JSX icon free?
Yes. You can copy the JSX component and use it in React and Next.js projects.
Can I customize it?
Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.