diff --git a/README.md b/README.md
index af50742..4c34e82 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,7 @@ import 'react-flagpack/dist/style.css'
 | hasBorder |  Boolean | false | true | - |
 | hasBorderRadius | Boolean | false | true | - |
 | gradient |  String | false | '' | 'top-down', 'real-linear' or 'real-circular' |
+| basePath |  String | false | '' | In case you want to serve your images from a CDN or if you're serving your React application from a custom path. For example with [basePath](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath)  |
 
 ## Migrating to 2.0.0
 To migrate to react-flagpack 2.0.0 you will need to make some minor changes to your code base. First you will need to add react-flagpack to your post-install hook see [installation](#installation), then run yarn install (ensuring you are on at minimal react-flagpack 2.0.2).
diff --git a/src/Flag.tsx b/src/Flag.tsx
index 6c87fad..517fda8 100644
--- a/src/Flag.tsx
+++ b/src/Flag.tsx
@@ -4,13 +4,14 @@ import { Flags } from 'flagpack-core'
 import './Flag.scss'
 
 export interface FlagProps {
-  code: Flags;
-  size?: string;
-  gradient?: '' | 'top-down' | 'real-circular' | 'real-linear';
-  hasBorder?: boolean;
-  hasDropShadow?: boolean;
-  hasBorderRadius?: boolean;
-  className?: string;
+  code: Flags
+  size?: string
+  gradient?: '' | 'top-down' | 'real-circular' | 'real-linear'
+  hasBorder?: boolean
+  hasDropShadow?: boolean
+  hasBorderRadius?: boolean
+  className?: string
+  basePath?: string
 }
 
 const Flag: React.FC<FlagProps> = ({
@@ -20,14 +21,19 @@ const Flag: React.FC<FlagProps> = ({
   hasBorder = true,
   hasDropShadow = false,
   hasBorderRadius = true,
-  className
+  className,
+  basePath = ''
 }: FlagProps) => {
   return (
     <div
-      className={`flag ${gradient} size-${size} ${hasBorder ? 'border' : ''} ${hasDropShadow ? 'drop-shadow' : ''} ${hasBorderRadius ? 'border-radius' : ''} ${className ? className.replace(/\s\s+/g, ' ').trim() : ''}`}
+      className={`flag ${gradient} size-${size} ${hasBorder ? 'border' : ''} ${
+        hasDropShadow ? 'drop-shadow' : ''
+      } ${hasBorderRadius ? 'border-radius' : ''} ${
+        className ? className.replace(/\s\s+/g, ' ').trim() : ''
+      }`}
     >
       {/* Depend on the build configs to make the assets available at this location */}
-      <img src={`/flags/${size}/${code}.svg`} />
+      <img src={`${basePath}/flags/${size}/${code}.svg`} />
     </div>
   )
 }