diff --git a/src/components/design/Flag/Flag.tsx b/src/components/design/Flag/Flag.tsx
new file mode 100644
index 0000000..61bf756
--- /dev/null
+++ b/src/components/design/Flag/Flag.tsx
@@ -0,0 +1,22 @@
+import classNames from 'classnames'
+import type { Component } from 'solid-js'
+
+import { SUPPORTED_LANGS } from '../../../config'
+
+interface FlagProps {
+  label?: boolean
+  domain: string
+}
+
+export const Flag: Component<FlagProps> = (props) => {
+  const lang = SUPPORTED_LANGS.filter((lang) => {
+    return lang.domain === props.domain
+  })[0]
+
+  return (
+    <>
+      <span class={classNames('', `fi fi-${lang.code}`)} />
+      {Boolean(props.label) && <span class='ml-3'>{lang.name}</span>}
+    </>
+  )
+}
diff --git a/src/components/design/Flag/index.ts b/src/components/design/Flag/index.ts
new file mode 100644
index 0000000..7e30cc1
--- /dev/null
+++ b/src/components/design/Flag/index.ts
@@ -0,0 +1 @@
+export * from './Flag'