From 525887a32ca781f36b91a08fa271b83713e74938 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 1 Apr 2022 16:28:09 +0200
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E2=9C=A8=20Custom=20icon=20on?=
 =?UTF-8?q?=20typebot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/FolderContent/TypebotButton.tsx |   28 +-
 .../ImageUploadContent/ImageUploadContent.tsx |   95 +-
 .../shared/ImageUploadContent/emojis.ts       | 1816 +++++++++++++++++
 .../TypebotHeader/EditableTypebotIcons.tsx    |   48 +
 .../TypebotHeader/EditableTypebotName.tsx     |    1 -
 .../shared/TypebotHeader/TypebotHeader.tsx    |   67 +-
 .../shared/TypebotHeader/TypebotIcon.tsx      |   37 +
 .../shared/buttons/UploadButton.tsx           |    2 +-
 .../TypebotContext/TypebotContext.tsx         |    5 +-
 apps/builder/package.json                     |    2 +
 apps/builder/pages/api/typebots.ts            |    2 +-
 .../pages/api/users/[id]/sharedTypebots.ts    |    9 +-
 apps/builder/playwright/services/database.ts  |    1 +
 apps/builder/playwright/tests/editor.spec.ts  |   24 +
 apps/builder/services/publicTypebot.tsx       |    1 +
 apps/builder/services/typebots/typebots.ts    |    3 +-
 apps/builder/services/user/sharedTypebots.ts  |    7 +-
 apps/viewer/playwright/services/database.ts   |    1 +
 packages/db/package.json                      |    2 +-
 .../migration.sql                             |    2 +
 packages/db/prisma/schema.prisma              |    1 +
 yarn.lock                                     |   15 +
 22 files changed, 2113 insertions(+), 56 deletions(-)
 create mode 100644 apps/builder/components/shared/ImageUploadContent/emojis.ts
 create mode 100644 apps/builder/components/shared/TypebotHeader/EditableTypebotIcons.tsx
 create mode 100644 apps/builder/components/shared/TypebotHeader/TypebotIcon.tsx
 create mode 100644 packages/db/prisma/migrations/20220401140029_add_icon_on_typebot/migration.sql

diff --git a/apps/builder/components/dashboard/FolderContent/TypebotButton.tsx b/apps/builder/components/dashboard/FolderContent/TypebotButton.tsx
index 307f9d56b..fa74a936c 100644
--- a/apps/builder/components/dashboard/FolderContent/TypebotButton.tsx
+++ b/apps/builder/components/dashboard/FolderContent/TypebotButton.tsx
@@ -4,6 +4,7 @@ import {
   Flex,
   IconButton,
   MenuItem,
+  Tag,
   Text,
   useDisclosure,
   useToast,
@@ -14,14 +15,15 @@ import { useRouter } from 'next/router'
 import { isMobile } from 'services/utils'
 import { MoreButton } from 'components/dashboard/FolderContent/MoreButton'
 import { ConfirmModal } from 'components/modals/ConfirmModal'
-import { GlobeIcon, GripIcon, ToolIcon } from 'assets/icons'
+import { GripIcon } from 'assets/icons'
 import { deleteTypebot, duplicateTypebot } from 'services/typebots'
 import { Typebot } from 'models'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
 import { useDebounce } from 'use-debounce'
+import { TypebotIcon } from 'components/shared/TypebotHeader/TypebotIcon'
 
 type ChatbotCardProps = {
-  typebot: Pick<Typebot, 'id' | 'publishedTypebotId' | 'name'>
+  typebot: Pick<Typebot, 'id' | 'publishedTypebotId' | 'name' | 'icon'>
   isReadOnly?: boolean
   onTypebotDeleted?: () => void
   onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void
@@ -101,6 +103,18 @@ export const TypebotButton = ({
       onMouseDown={onMouseDown}
       cursor="pointer"
     >
+      {typebot.publishedTypebotId && (
+        <Tag
+          colorScheme="blue"
+          variant="solid"
+          rounded="full"
+          pos="absolute"
+          top="27px"
+          size="sm"
+        >
+          Live
+        </Tag>
+      )}
       {!isReadOnly && (
         <>
           <IconButton
@@ -129,18 +143,12 @@ export const TypebotButton = ({
       )}
       <VStack spacing="4">
         <Flex
-          boxSize="45px"
           rounded="full"
           justifyContent="center"
           alignItems="center"
-          bgColor={typebot.publishedTypebotId ? 'blue.500' : 'gray.400'}
-          color="white"
+          fontSize={'4xl'}
         >
-          {typebot.publishedTypebotId ? (
-            <GlobeIcon fontSize="20px" />
-          ) : (
-            <ToolIcon fill="white" fontSize="20px" />
-          )}
+          {<TypebotIcon icon={typebot.icon} boxSize={'35px'} />}
         </Flex>
         <Text>{typebot.name}</Text>
       </VStack>
diff --git a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
index 6a0edb03c..17af6cc8d 100644
--- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
@@ -1,31 +1,59 @@
-import { useEffect, useState } from 'react'
-import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
+import { ChangeEvent, useEffect, useState } from 'react'
+import {
+  Button,
+  Flex,
+  HStack,
+  Stack,
+  Text,
+  Input as ClassicInput,
+  SimpleGrid,
+  GridItem,
+} from '@chakra-ui/react'
 import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useDebounce } from 'use-debounce'
 import { Input } from '../Textbox'
+import { BaseEmoji, emojiIndex } from 'emoji-mart'
+import { emojis } from './emojis'
 
 type Props = {
   url?: string
-  onSubmit: (url: string) => void
+  isEmojiEnabled?: boolean
   isGiphyEnabled?: boolean
+  onSubmit: (url: string) => void
+  onClose?: () => void
 }
 
 export const ImageUploadContent = ({
   url,
   onSubmit,
+  isEmojiEnabled = false,
   isGiphyEnabled = true,
+  onClose,
 }: Props) => {
-  const [currentTab, setCurrentTab] = useState<'link' | 'upload' | 'giphy'>(
-    'upload'
-  )
+  const [currentTab, setCurrentTab] = useState<
+    'link' | 'upload' | 'giphy' | 'emoji'
+  >(isEmojiEnabled ? 'emoji' : 'upload')
+
+  const handleSubmit = (url: string) => {
+    onSubmit(url)
+    onClose && onClose()
+  }
 
-  const handleSubmit = (url: string) => onSubmit(url)
   return (
     <Stack>
       <HStack>
+        {isEmojiEnabled && (
+          <Button
+            variant={currentTab === 'emoji' ? 'solid' : 'ghost'}
+            onClick={() => setCurrentTab('emoji')}
+            size="sm"
+          >
+            Emoji
+          </Button>
+        )}
         <Button
           variant={currentTab === 'upload' ? 'solid' : 'ghost'}
           onClick={() => setCurrentTab('upload')}
@@ -61,7 +89,7 @@ const BodyContent = ({
   url,
   onSubmit,
 }: {
-  tab: 'upload' | 'link' | 'giphy'
+  tab: 'upload' | 'link' | 'giphy' | 'emoji'
   url?: string
   onSubmit: (url: string) => void
 }) => {
@@ -72,6 +100,8 @@ const BodyContent = ({
       return <EmbedLinkContent initialUrl={url} onNewUrl={onSubmit} />
     case 'giphy':
       return <GiphyContent onNewUrl={onSubmit} />
+    case 'emoji':
+      return <EmojiContent onEmojiSelected={onSubmit} />
   }
 }
 
@@ -114,6 +144,55 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
   )
 }
 
+const EmojiContent = ({
+  onEmojiSelected,
+}: {
+  onEmojiSelected: (emoji: string) => void
+}) => {
+  const [searchValue, setSearchValue] = useState('')
+  const [filteredEmojis, setFilteredEmojis] = useState<string[]>(emojis)
+
+  const handleEmojiClick = (emoji: string) => () => onEmojiSelected(emoji)
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value)
+    setFilteredEmojis(
+      emojiIndex.search(e.target.value)?.map((o) => (o as BaseEmoji).native) ??
+        emojis
+    )
+  }
+
+  return (
+    <Stack>
+      <ClassicInput
+        placeholder="Search..."
+        value={searchValue}
+        onChange={handleSearchChange}
+      />
+      <SimpleGrid
+        maxH="350px"
+        overflowY="scroll"
+        overflowX="hidden"
+        spacing={0}
+        columns={7}
+      >
+        {filteredEmojis.map((emoji) => (
+          <GridItem key={emoji}>
+            <Button
+              onClick={handleEmojiClick(emoji)}
+              variant="ghost"
+              size="sm"
+              fontSize="xl"
+            >
+              {emoji}
+            </Button>
+          </GridItem>
+        ))}
+      </SimpleGrid>
+    </Stack>
+  )
+}
+
 const GiphyContent = ({ onNewUrl }: ContentProps) => {
   if (!process.env.NEXT_PUBLIC_GIPHY_API_KEY)
     return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
diff --git a/apps/builder/components/shared/ImageUploadContent/emojis.ts b/apps/builder/components/shared/ImageUploadContent/emojis.ts
new file mode 100644
index 000000000..0df0bd35c
--- /dev/null
+++ b/apps/builder/components/shared/ImageUploadContent/emojis.ts
@@ -0,0 +1,1816 @@
+export const emojis = [
+  '😀',
+  '😃',
+  '😄',
+  '😁',
+  '😆',
+  '😅',
+  '🤣',
+  '😂',
+  '🙂',
+  '🙃',
+  '😉',
+  '😊',
+  '😇',
+  '🥰',
+  '😍',
+  '🤩',
+  '😘',
+  '😗',
+  '😚',
+  '😙',
+  '🥲',
+  '😋',
+  '😛',
+  '😜',
+  '🤪',
+  '😝',
+  '🤑',
+  '🤗',
+  '🤭',
+  '🤫',
+  '🤔',
+  '🤐',
+  '🤨',
+  '😐',
+  '😑',
+  '😶',
+  '😶‍🌫️',
+  '😏',
+  '😒',
+  '🙄',
+  '😬',
+  '😮‍💨',
+  '🤥',
+  '😌',
+  '😔',
+  '😪',
+  '🤤',
+  '😴',
+  '😷',
+  '🤒',
+  '🤕',
+  '🤢',
+  '🤮',
+  '🤧',
+  '🥵',
+  '🥶',
+  '🥴',
+  '😵',
+  '😵‍💫',
+  '🤯',
+  '🤠',
+  '🥳',
+  '🥸',
+  '😎',
+  '🤓',
+  '🧐',
+  '😕',
+  '😟',
+  '🙁',
+  '☹️',
+  '😮',
+  '😯',
+  '😲',
+  '😳',
+  '🥺',
+  '😦',
+  '😧',
+  '😨',
+  '😰',
+  '😥',
+  '😢',
+  '😭',
+  '😱',
+  '😖',
+  '😣',
+  '😞',
+  '😓',
+  '😩',
+  '😫',
+  '🥱',
+  '😤',
+  '😡',
+  '😠',
+  '🤬',
+  '😈',
+  '👿',
+  '💀',
+  '☠️',
+  '💩',
+  '🤡',
+  '👹',
+  '👺',
+  '👻',
+  '👽',
+  '👾',
+  '🤖',
+  '😺',
+  '😸',
+  '😹',
+  '😻',
+  '😼',
+  '😽',
+  '🙀',
+  '😿',
+  '😾',
+  '🙈',
+  '🙉',
+  '🙊',
+  '💋',
+  '💌',
+  '💘',
+  '💝',
+  '💖',
+  '💗',
+  '💓',
+  '💞',
+  '💕',
+  '💟',
+  '❣️',
+  '💔',
+  '❤️‍🔥',
+  '❤️‍🩹',
+  '❤️',
+  '🧡',
+  '💛',
+  '💚',
+  '💙',
+  '💜',
+  '🤎',
+  '🖤',
+  '🤍',
+  '💯',
+  '💢',
+  '💥',
+  '💫',
+  '💦',
+  '💨',
+  '🕳️',
+  '💣',
+  '💬',
+  '👁️‍🗨️',
+  '🗨️',
+  '🗯️',
+  '💭',
+  '💤',
+  '👋',
+  '🤚',
+  '🖐️',
+  '✋',
+  '🖖',
+  '👌',
+  '🤌',
+  '🤏',
+  '✌️',
+  '🤞',
+  '🤟',
+  '🤘',
+  '🤙',
+  '👈',
+  '👉',
+  '👆',
+  '🖕',
+  '👇',
+  '☝️',
+  '👍',
+  '👎',
+  '✊',
+  '👊',
+  '🤛',
+  '🤜',
+  '👏',
+  '🙌',
+  '👐',
+  '🤲',
+  '🤝',
+  '🙏',
+  '✍️',
+  '💅',
+  '🤳',
+  '💪',
+  '🦾',
+  '🦿',
+  '🦵',
+  '🦶',
+  '👂',
+  '🦻',
+  '👃',
+  '🧠',
+  '🫀',
+  '🫁',
+  '🦷',
+  '🦴',
+  '👀',
+  '👁️',
+  '👅',
+  '👄',
+  '👶',
+  '🧒',
+  '👦',
+  '👧',
+  '🧑',
+  '👱',
+  '👨',
+  '🧔',
+  '🧔‍♂️',
+  '🧔‍♀️',
+  '👨‍🦰',
+  '👨‍🦱',
+  '👨‍🦳',
+  '👨‍🦲',
+  '👩',
+  '👩‍🦰',
+  '🧑‍🦰',
+  '👩‍🦱',
+  '🧑‍🦱',
+  '👩‍🦳',
+  '🧑‍🦳',
+  '👩‍🦲',
+  '🧑‍🦲',
+  '👱‍♀️',
+  '👱‍♂️',
+  '🧓',
+  '👴',
+  '👵',
+  '🙍',
+  '🙍‍♂️',
+  '🙍‍♀️',
+  '🙎',
+  '🙎‍♂️',
+  '🙎‍♀️',
+  '🙅',
+  '🙅‍♂️',
+  '🙅‍♀️',
+  '🙆',
+  '🙆‍♂️',
+  '🙆‍♀️',
+  '💁',
+  '💁‍♂️',
+  '💁‍♀️',
+  '🙋',
+  '🙋‍♂️',
+  '🙋‍♀️',
+  '🧏',
+  '🧏‍♂️',
+  '🧏‍♀️',
+  '🙇',
+  '🙇‍♂️',
+  '🙇‍♀️',
+  '🤦',
+  '🤦‍♂️',
+  '🤦‍♀️',
+  '🤷',
+  '🤷‍♂️',
+  '🤷‍♀️',
+  '🧑‍⚕️',
+  '👨‍⚕️',
+  '👩‍⚕️',
+  '🧑‍🎓',
+  '👨‍🎓',
+  '👩‍🎓',
+  '🧑‍🏫',
+  '👨‍🏫',
+  '👩‍🏫',
+  '🧑‍⚖️',
+  '👨‍⚖️',
+  '👩‍⚖️',
+  '🧑‍🌾',
+  '👨‍🌾',
+  '👩‍🌾',
+  '🧑‍🍳',
+  '👨‍🍳',
+  '👩‍🍳',
+  '🧑‍🔧',
+  '👨‍🔧',
+  '👩‍🔧',
+  '🧑‍🏭',
+  '👨‍🏭',
+  '👩‍🏭',
+  '🧑‍💼',
+  '👨‍💼',
+  '👩‍💼',
+  '🧑‍🔬',
+  '👨‍🔬',
+  '👩‍🔬',
+  '🧑‍💻',
+  '👨‍💻',
+  '👩‍💻',
+  '🧑‍🎤',
+  '👨‍🎤',
+  '👩‍🎤',
+  '🧑‍🎨',
+  '👨‍🎨',
+  '👩‍🎨',
+  '🧑‍✈️',
+  '👨‍✈️',
+  '👩‍✈️',
+  '🧑‍🚀',
+  '👨‍🚀',
+  '👩‍🚀',
+  '🧑‍🚒',
+  '👨‍🚒',
+  '👩‍🚒',
+  '👮',
+  '👮‍♂️',
+  '👮‍♀️',
+  '🕵️',
+  '🕵️‍♂️',
+  '🕵️‍♀️',
+  '💂',
+  '💂‍♂️',
+  '💂‍♀️',
+  '🥷',
+  '👷',
+  '👷‍♂️',
+  '👷‍♀️',
+  '🤴',
+  '👸',
+  '👳',
+  '👳‍♂️',
+  '👳‍♀️',
+  '👲',
+  '🧕',
+  '🤵',
+  '🤵‍♂️',
+  '🤵‍♀️',
+  '👰',
+  '👰‍♂️',
+  '👰‍♀️',
+  '🤰',
+  '🫃',
+  '🫄',
+  '🤱',
+  '👩‍🍼',
+  '👨‍🍼',
+  '🧑‍🍼',
+  '👼',
+  '🎅',
+  '🤶',
+  '🧑‍🎄',
+  '🦸',
+  '🦸‍♂️',
+  '🦸‍♀️',
+  '🦹',
+  '🦹‍♂️',
+  '🦹‍♀️',
+  '🧙',
+  '🧙‍♂️',
+  '🧙‍♀️',
+  '🧚',
+  '🧚‍♂️',
+  '🧚‍♀️',
+  '🧛',
+  '🧛‍♂️',
+  '🧛‍♀️',
+  '🧜',
+  '🧜‍♂️',
+  '🧜‍♀️',
+  '🧝',
+  '🧝‍♂️',
+  '🧝‍♀️',
+  '🧞',
+  '🧞‍♂️',
+  '🧞‍♀️',
+  '🧟',
+  '🧟‍♂️',
+  '🧟‍♀️',
+  '💆',
+  '💆‍♂️',
+  '💆‍♀️',
+  '💇',
+  '💇‍♂️',
+  '💇‍♀️',
+  '🚶',
+  '🚶‍♂️',
+  '🚶‍♀️',
+  '🧍',
+  '🧍‍♂️',
+  '🧍‍♀️',
+  '🧎',
+  '🧎‍♂️',
+  '🧎‍♀️',
+  '🧑‍🦯',
+  '👨‍🦯',
+  '👩‍🦯',
+  '🧑‍🦼',
+  '👨‍🦼',
+  '👩‍🦼',
+  '🧑‍🦽',
+  '👨‍🦽',
+  '👩‍🦽',
+  '🏃',
+  '🏃‍♂️',
+  '🏃‍♀️',
+  '💃',
+  '🕺',
+  '🕴️',
+  '👯',
+  '👯‍♂️',
+  '👯‍♀️',
+  '🧖',
+  '🧖‍♂️',
+  '🧖‍♀️',
+  '🧗',
+  '🧗‍♂️',
+  '🧗‍♀️',
+  '🤺',
+  '🏇',
+  '⛷️',
+  '🏂',
+  '🏌️',
+  '🏌️‍♂️',
+  '🏌️‍♀️',
+  '🏄',
+  '🏄‍♂️',
+  '🏄‍♀️',
+  '🚣',
+  '🚣‍♂️',
+  '🚣‍♀️',
+  '🏊',
+  '🏊‍♂️',
+  '🏊‍♀️',
+  '⛹️',
+  '⛹️‍♂️',
+  '⛹️‍♀️',
+  '🏋️',
+  '🏋️‍♂️',
+  '🏋️‍♀️',
+  '🚴',
+  '🚴‍♂️',
+  '🚴‍♀️',
+  '🚵',
+  '🚵‍♂️',
+  '🚵‍♀️',
+  '🤸',
+  '🤸‍♂️',
+  '🤸‍♀️',
+  '🤼',
+  '🤼‍♂️',
+  '🤼‍♀️',
+  '🤽',
+  '🤽‍♂️',
+  '🤽‍♀️',
+  '🤾',
+  '🤾‍♂️',
+  '🤾‍♀️',
+  '🤹',
+  '🤹‍♂️',
+  '🤹‍♀️',
+  '🧘',
+  '🧘‍♂️',
+  '🧘‍♀️',
+  '🛀',
+  '🛌',
+  '🧑‍🤝‍🧑',
+  '👭',
+  '👫',
+  '👬',
+  '💏',
+  '👩‍❤️‍💋‍👨',
+  '👨‍❤️‍💋‍👨',
+  '👩‍❤️‍💋‍👩',
+  '💑',
+  '👩‍❤️‍👨',
+  '👨‍❤️‍👨',
+  '👩‍❤️‍👩',
+  '👪',
+  '👨‍👩‍👦',
+  '👨‍👩‍👧',
+  '👨‍👩‍👧‍👦',
+  '👨‍👩‍👦‍👦',
+  '👨‍👩‍👧‍👧',
+  '👨‍👨‍👦',
+  '👨‍👨‍👧',
+  '👨‍👨‍👧‍👦',
+  '👨‍👨‍👦‍👦',
+  '👨‍👨‍👧‍👧',
+  '👩‍👩‍👦',
+  '👩‍👩‍👧',
+  '👩‍👩‍👧‍👦',
+  '👩‍👩‍👦‍👦',
+  '👩‍👩‍👧‍👧',
+  '👨‍👦',
+  '👨‍👦‍👦',
+  '👨‍👧',
+  '👨‍👧‍👦',
+  '👨‍👧‍👧',
+  '👩‍👦',
+  '👩‍👦‍👦',
+  '👩‍👧',
+  '👩‍👧‍👦',
+  '👩‍👧‍👧',
+  '🗣️',
+  '👤',
+  '👥',
+  '🫂',
+  '👣',
+  '🐵',
+  '🐒',
+  '🦍',
+  '🦧',
+  '🐶',
+  '🐕',
+  '🦮',
+  '🐕‍🦺',
+  '🐩',
+  '🐺',
+  '🦊',
+  '🦝',
+  '🐱',
+  '🐈',
+  '🐈‍⬛',
+  '🦁',
+  '🐯',
+  '🐅',
+  '🐆',
+  '🐴',
+  '🐎',
+  '🦄',
+  '🦓',
+  '🦌',
+  '🦬',
+  '🐮',
+  '🐂',
+  '🐃',
+  '🐄',
+  '🐷',
+  '🐖',
+  '🐗',
+  '🐽',
+  '🐏',
+  '🐑',
+  '🐐',
+  '🐪',
+  '🐫',
+  '🦙',
+  '🦒',
+  '🐘',
+  '🦣',
+  '🦏',
+  '🦛',
+  '🐭',
+  '🐁',
+  '🐀',
+  '🐹',
+  '🐰',
+  '🐇',
+  '🐿️',
+  '🦫',
+  '🦔',
+  '🦇',
+  '🐻',
+  '🐻‍❄️',
+  '🐨',
+  '🐼',
+  '🦥',
+  '🦦',
+  '🦨',
+  '🦘',
+  '🦡',
+  '🐾',
+  '🦃',
+  '🐔',
+  '🐓',
+  '🐣',
+  '🐤',
+  '🐥',
+  '🐦',
+  '🐧',
+  '🕊️',
+  '🦅',
+  '🦆',
+  '🦢',
+  '🦉',
+  '🦤',
+  '🪶',
+  '🦩',
+  '🦚',
+  '🦜',
+  '🐸',
+  '🐊',
+  '🐢',
+  '🦎',
+  '🐍',
+  '🐲',
+  '🐉',
+  '🦕',
+  '🦖',
+  '🐳',
+  '🐋',
+  '🐬',
+  '🦭',
+  '🐟',
+  '🐠',
+  '🐡',
+  '🦈',
+  '🐙',
+  '🐚',
+  '🐌',
+  '🦋',
+  '🐛',
+  '🐜',
+  '🐝',
+  '🪲',
+  '🐞',
+  '🦗',
+  '🪳',
+  '🕷️',
+  '🕸️',
+  '🦂',
+  '🦟',
+  '🪰',
+  '🪱',
+  '🦠',
+  '💐',
+  '🌸',
+  '💮',
+  '🏵️',
+  '🌹',
+  '🥀',
+  '🌺',
+  '🌻',
+  '🌼',
+  '🌷',
+  '🌱',
+  '🪴',
+  '🌲',
+  '🌳',
+  '🌴',
+  '🌵',
+  '🌾',
+  '🌿',
+  '☘️',
+  '🍀',
+  '🍁',
+  '🍂',
+  '🍃',
+  '🍇',
+  '🍈',
+  '🍉',
+  '🍊',
+  '🍋',
+  '🍌',
+  '🍍',
+  '🥭',
+  '🍎',
+  '🍏',
+  '🍐',
+  '🍑',
+  '🍒',
+  '🍓',
+  '🫐',
+  '🥝',
+  '🍅',
+  '🫒',
+  '🥥',
+  '🥑',
+  '🍆',
+  '🥔',
+  '🥕',
+  '🌽',
+  '🌶️',
+  '🫑',
+  '🥒',
+  '🥬',
+  '🥦',
+  '🧄',
+  '🧅',
+  '🍄',
+  '🥜',
+  '🌰',
+  '🍞',
+  '🥐',
+  '🥖',
+  '🫓',
+  '🥨',
+  '🥯',
+  '🥞',
+  '🧇',
+  '🧀',
+  '🍖',
+  '🍗',
+  '🥩',
+  '🥓',
+  '🍔',
+  '🍟',
+  '🍕',
+  '🌭',
+  '🥪',
+  '🌮',
+  '🌯',
+  '🫔',
+  '🥙',
+  '🧆',
+  '🥚',
+  '🍳',
+  '🥘',
+  '🍲',
+  '🫕',
+  '🥣',
+  '🥗',
+  '🍿',
+  '🧈',
+  '🧂',
+  '🥫',
+  '🍱',
+  '🍘',
+  '🍙',
+  '🍚',
+  '🍛',
+  '🍜',
+  '🍝',
+  '🍠',
+  '🍢',
+  '🍣',
+  '🍤',
+  '🍥',
+  '🥮',
+  '🍡',
+  '🥟',
+  '🥠',
+  '🥡',
+  '🦀',
+  '🦞',
+  '🦐',
+  '🦑',
+  '🦪',
+  '🍦',
+  '🍧',
+  '🍨',
+  '🍩',
+  '🍪',
+  '🎂',
+  '🍰',
+  '🧁',
+  '🥧',
+  '🍫',
+  '🍬',
+  '🍭',
+  '🍮',
+  '🍯',
+  '🍼',
+  '🥛',
+  '☕',
+  '🫖',
+  '🍵',
+  '🍶',
+  '🍾',
+  '🍷',
+  '🍸',
+  '🍹',
+  '🍺',
+  '🍻',
+  '🥂',
+  '🥃',
+  '🥤',
+  '🧋',
+  '🧃',
+  '🧉',
+  '🧊',
+  '🥢',
+  '🍽️',
+  '🍴',
+  '🥄',
+  '🔪',
+  '🏺',
+  '🌍',
+  '🌎',
+  '🌏',
+  '🌐',
+  '🗺️',
+  '🗾',
+  '🧭',
+  '🏔️',
+  '⛰️',
+  '🌋',
+  '🗻',
+  '🏕️',
+  '🏖️',
+  '🏜️',
+  '🏝️',
+  '🏞️',
+  '🏟️',
+  '🏛️',
+  '🏗️',
+  '🧱',
+  '🪨',
+  '🪵',
+  '🛖',
+  '🏘️',
+  '🏚️',
+  '🏠',
+  '🏡',
+  '🏢',
+  '🏣',
+  '🏤',
+  '🏥',
+  '🏦',
+  '🏨',
+  '🏩',
+  '🏪',
+  '🏫',
+  '🏬',
+  '🏭',
+  '🏯',
+  '🏰',
+  '💒',
+  '🗼',
+  '🗽',
+  '⛪',
+  '🕌',
+  '🛕',
+  '🕍',
+  '⛩️',
+  '🕋',
+  '⛲',
+  '⛺',
+  '🌁',
+  '🌃',
+  '🏙️',
+  '🌄',
+  '🌅',
+  '🌆',
+  '🌇',
+  '🌉',
+  '♨️',
+  '🎠',
+  '🎡',
+  '🎢',
+  '💈',
+  '🎪',
+  '🚂',
+  '🚃',
+  '🚄',
+  '🚅',
+  '🚆',
+  '🚇',
+  '🚈',
+  '🚉',
+  '🚊',
+  '🚝',
+  '🚞',
+  '🚋',
+  '🚌',
+  '🚍',
+  '🚎',
+  '🚐',
+  '🚑',
+  '🚒',
+  '🚓',
+  '🚔',
+  '🚕',
+  '🚖',
+  '🚗',
+  '🚘',
+  '🚙',
+  '🛻',
+  '🚚',
+  '🚛',
+  '🚜',
+  '🏎️',
+  '🏍️',
+  '🛵',
+  '🦽',
+  '🦼',
+  '🛺',
+  '🚲',
+  '🛴',
+  '🛹',
+  '🛼',
+  '🚏',
+  '🛣️',
+  '🛤️',
+  '🛢️',
+  '⛽',
+  '🚨',
+  '🚥',
+  '🚦',
+  '🛑',
+  '🚧',
+  '⚓',
+  '⛵',
+  '🛶',
+  '🚤',
+  '🛳️',
+  '⛴️',
+  '🛥️',
+  '🚢',
+  '✈️',
+  '🛩️',
+  '🛫',
+  '🛬',
+  '🪂',
+  '💺',
+  '🚁',
+  '🚟',
+  '🚠',
+  '🚡',
+  '🛰️',
+  '🚀',
+  '🛸',
+  '🛎️',
+  '🧳',
+  '⌛',
+  '⏳',
+  '⌚',
+  '⏰',
+  '⏱️',
+  '⏲️',
+  '🕰️',
+  '🕛',
+  '🕧',
+  '🕐',
+  '🕜',
+  '🕑',
+  '🕝',
+  '🕒',
+  '🕞',
+  '🕓',
+  '🕟',
+  '🕔',
+  '🕠',
+  '🕕',
+  '🕡',
+  '🕖',
+  '🕢',
+  '🕗',
+  '🕣',
+  '🕘',
+  '🕤',
+  '🕙',
+  '🕥',
+  '🕚',
+  '🕦',
+  '🌑',
+  '🌒',
+  '🌓',
+  '🌔',
+  '🌕',
+  '🌖',
+  '🌗',
+  '🌘',
+  '🌙',
+  '🌚',
+  '🌛',
+  '🌜',
+  '🌡️',
+  '☀️',
+  '🌝',
+  '🌞',
+  '🪐',
+  '⭐',
+  '🌟',
+  '🌠',
+  '🌌',
+  '☁️',
+  '⛅',
+  '⛈️',
+  '🌤️',
+  '🌥️',
+  '🌦️',
+  '🌧️',
+  '🌨️',
+  '🌩️',
+  '🌪️',
+  '🌫️',
+  '🌬️',
+  '🌀',
+  '🌈',
+  '🌂',
+  '☂️',
+  '☔',
+  '⛱️',
+  '⚡',
+  '❄️',
+  '☃️',
+  '⛄',
+  '☄️',
+  '🔥',
+  '💧',
+  '🌊',
+  '🎃',
+  '🎄',
+  '🎆',
+  '🎇',
+  '🧨',
+  '✨',
+  '🎈',
+  '🎉',
+  '🎊',
+  '🎋',
+  '🎍',
+  '🎎',
+  '🎏',
+  '🎐',
+  '🎑',
+  '🧧',
+  '🎀',
+  '🎁',
+  '🎗️',
+  '🎟️',
+  '🎫',
+  '🎖️',
+  '🏆',
+  '🏅',
+  '🥇',
+  '🥈',
+  '🥉',
+  '⚽',
+  '⚾',
+  '🥎',
+  '🏀',
+  '🏐',
+  '🏈',
+  '🏉',
+  '🎾',
+  '🥏',
+  '🎳',
+  '🏏',
+  '🏑',
+  '🏒',
+  '🥍',
+  '🏓',
+  '🏸',
+  '🥊',
+  '🥋',
+  '🥅',
+  '⛳',
+  '⛸️',
+  '🎣',
+  '🤿',
+  '🎽',
+  '🎿',
+  '🛷',
+  '🥌',
+  '🎯',
+  '🪀',
+  '🪁',
+  '🎱',
+  '🔮',
+  '🪄',
+  '🧿',
+  '🎮',
+  '🕹️',
+  '🎰',
+  '🎲',
+  '🧩',
+  '🧸',
+  '🪅',
+  '🪆',
+  '♠️',
+  '♥️',
+  '♦️',
+  '♣️',
+  '♟️',
+  '🃏',
+  '🀄',
+  '🎴',
+  '🎭',
+  '🖼️',
+  '🎨',
+  '🧵',
+  '🪡',
+  '🧶',
+  '🪢',
+  '👓',
+  '🕶️',
+  '🥽',
+  '🥼',
+  '🦺',
+  '👔',
+  '👕',
+  '👖',
+  '🧣',
+  '🧤',
+  '🧥',
+  '🧦',
+  '👗',
+  '👘',
+  '🥻',
+  '🩱',
+  '🩲',
+  '🩳',
+  '👙',
+  '👚',
+  '👛',
+  '👜',
+  '👝',
+  '🛍️',
+  '🎒',
+  '🩴',
+  '👞',
+  '👟',
+  '🥾',
+  '🥿',
+  '👠',
+  '👡',
+  '🩰',
+  '👢',
+  '👑',
+  '👒',
+  '🎩',
+  '🎓',
+  '🧢',
+  '🪖',
+  '⛑️',
+  '📿',
+  '💄',
+  '💍',
+  '💎',
+  '🔇',
+  '🔈',
+  '🔉',
+  '🔊',
+  '📢',
+  '📣',
+  '📯',
+  '🔔',
+  '🔕',
+  '🎼',
+  '🎵',
+  '🎶',
+  '🎙️',
+  '🎚️',
+  '🎛️',
+  '🎤',
+  '🎧',
+  '📻',
+  '🎷',
+  '🪗',
+  '🎸',
+  '🎹',
+  '🎺',
+  '🎻',
+  '🪕',
+  '🥁',
+  '🪘',
+  '📱',
+  '📲',
+  '☎️',
+  '📞',
+  '📟',
+  '📠',
+  '🔋',
+  '🔌',
+  '💻',
+  '🖥️',
+  '🖨️',
+  '⌨️',
+  '🖱️',
+  '🖲️',
+  '💽',
+  '💾',
+  '💿',
+  '📀',
+  '🧮',
+  '🎥',
+  '🎞️',
+  '📽️',
+  '🎬',
+  '📺',
+  '📷',
+  '📸',
+  '📹',
+  '📼',
+  '🔍',
+  '🔎',
+  '🕯️',
+  '💡',
+  '🔦',
+  '🏮',
+  '🪔',
+  '📔',
+  '📕',
+  '📖',
+  '📗',
+  '📘',
+  '📙',
+  '📚',
+  '📓',
+  '📒',
+  '📃',
+  '📜',
+  '📄',
+  '📰',
+  '🗞️',
+  '📑',
+  '🔖',
+  '🏷️',
+  '💰',
+  '🪙',
+  '💴',
+  '💵',
+  '💶',
+  '💷',
+  '💸',
+  '💳',
+  '🧾',
+  '💹',
+  '✉️',
+  '📧',
+  '📨',
+  '📩',
+  '📤',
+  '📥',
+  '📦',
+  '📫',
+  '📪',
+  '📬',
+  '📭',
+  '📮',
+  '🗳️',
+  '✏️',
+  '✒️',
+  '🖋️',
+  '🖊️',
+  '🖌️',
+  '🖍️',
+  '📝',
+  '💼',
+  '📁',
+  '📂',
+  '🗂️',
+  '📅',
+  '📆',
+  '🗒️',
+  '🗓️',
+  '📇',
+  '📈',
+  '📉',
+  '📊',
+  '📋',
+  '📌',
+  '📍',
+  '📎',
+  '🖇️',
+  '📏',
+  '📐',
+  '✂️',
+  '🗃️',
+  '🗄️',
+  '🗑️',
+  '🔒',
+  '🔓',
+  '🔏',
+  '🔐',
+  '🔑',
+  '🗝️',
+  '🔨',
+  '🪓',
+  '⛏️',
+  '⚒️',
+  '🛠️',
+  '🗡️',
+  '⚔️',
+  '🔫',
+  '🪃',
+  '🏹',
+  '🛡️',
+  '🪚',
+  '🔧',
+  '🪛',
+  '🔩',
+  '⚙️',
+  '🗜️',
+  '⚖️',
+  '🦯',
+  '🔗',
+  '⛓️',
+  '🪝',
+  '🧰',
+  '🧲',
+  '🪜',
+  '⚗️',
+  '🧪',
+  '🧫',
+  '🧬',
+  '🔬',
+  '🔭',
+  '📡',
+  '💉',
+  '🩸',
+  '💊',
+  '🩹',
+  '🩺',
+  '🚪',
+  '🛗',
+  '🪞',
+  '🪟',
+  '🛏️',
+  '🛋️',
+  '🪑',
+  '🚽',
+  '🪠',
+  '🚿',
+  '🛁',
+  '🪤',
+  '🪒',
+  '🧴',
+  '🧷',
+  '🧹',
+  '🧺',
+  '🧻',
+  '🪣',
+  '🧼',
+  '🪥',
+  '🧽',
+  '🧯',
+  '🛒',
+  '🚬',
+  '⚰️',
+  '🪦',
+  '⚱️',
+  '🗿',
+  '🪧',
+  '🏧',
+  '🚮',
+  '🚰',
+  '♿',
+  '🚹',
+  '🚺',
+  '🚻',
+  '🚼',
+  '🚾',
+  '🛂',
+  '🛃',
+  '🛄',
+  '🛅',
+  '⚠️',
+  '🚸',
+  '⛔',
+  '🚫',
+  '🚳',
+  '🚭',
+  '🚯',
+  '🚱',
+  '🚷',
+  '📵',
+  '🔞',
+  '☢️',
+  '☣️',
+  '⬆️',
+  '↗️',
+  '➡️',
+  '↘️',
+  '⬇️',
+  '↙️',
+  '⬅️',
+  '↖️',
+  '↕️',
+  '↔️',
+  '↩️',
+  '↪️',
+  '⤴️',
+  '⤵️',
+  '🔃',
+  '🔄',
+  '🔙',
+  '🔚',
+  '🔛',
+  '🔜',
+  '🔝',
+  '🛐',
+  '⚛️',
+  '🕉️',
+  '✡️',
+  '☸️',
+  '☯️',
+  '✝️',
+  '☦️',
+  '☪️',
+  '☮️',
+  '🕎',
+  '🔯',
+  '♈',
+  '♉',
+  '♊',
+  '♋',
+  '♌',
+  '♍',
+  '♎',
+  '♏',
+  '♐',
+  '♑',
+  '♒',
+  '♓',
+  '⛎',
+  '🔀',
+  '🔁',
+  '🔂',
+  '▶️',
+  '⏩',
+  '⏭️',
+  '⏯️',
+  '◀️',
+  '⏪',
+  '⏮️',
+  '🔼',
+  '⏫',
+  '🔽',
+  '⏬',
+  '⏸️',
+  '⏹️',
+  '⏺️',
+  '⏏️',
+  '🎦',
+  '🔅',
+  '🔆',
+  '📶',
+  '📳',
+  '📴',
+  '♀️',
+  '♂️',
+  '⚧️',
+  '✖️',
+  '➕',
+  '➖',
+  '➗',
+  '🟰',
+  '♾️',
+  '‼️',
+  '⁉️',
+  '❓',
+  '❔',
+  '❕',
+  '❗',
+  '〰️',
+  '💱',
+  '💲',
+  '⚕️',
+  '♻️',
+  '⚜️',
+  '🔱',
+  '📛',
+  '🔰',
+  '⭕',
+  '✅',
+  '☑️',
+  '✔️',
+  '❌',
+  '❎',
+  '➰',
+  '➿',
+  '〽️',
+  '✳️',
+  '✴️',
+  '❇️',
+  '©️',
+  '®️',
+  '™️',
+  '#️⃣',
+  '*️⃣',
+  '0️⃣',
+  '1️⃣',
+  '2️⃣',
+  '3️⃣',
+  '4️⃣',
+  '5️⃣',
+  '6️⃣',
+  '7️⃣',
+  '8️⃣',
+  '9️⃣',
+  '🔟',
+  '🔠',
+  '🔡',
+  '🔢',
+  '🔣',
+  '🔤',
+  '🅰️',
+  '🆎',
+  '🅱️',
+  '🆑',
+  '🆒',
+  '🆓',
+  'ℹ️',
+  '🆔',
+  'Ⓜ️',
+  '🆕',
+  '🆖',
+  '🅾️',
+  '🆗',
+  '🅿️',
+  '🆘',
+  '🆙',
+  '🆚',
+  '🈁',
+  '🈂️',
+  '🈷️',
+  '🈶',
+  '🈯',
+  '🉐',
+  '🈹',
+  '🈚',
+  '🈲',
+  '🉑',
+  '🈸',
+  '🈴',
+  '🈳',
+  '㊗️',
+  '㊙️',
+  '🈺',
+  '🈵',
+  '🔴',
+  '🟠',
+  '🟡',
+  '🟢',
+  '🔵',
+  '🟣',
+  '🟤',
+  '⚫',
+  '⚪',
+  '🟥',
+  '🟧',
+  '🟨',
+  '🟩',
+  '🟦',
+  '🟪',
+  '🟫',
+  '⬛',
+  '⬜',
+  '◼️',
+  '◻️',
+  '◾',
+  '◽',
+  '▪️',
+  '▫️',
+  '🔶',
+  '🔷',
+  '🔸',
+  '🔹',
+  '🔺',
+  '🔻',
+  '💠',
+  '🔘',
+  '🔳',
+  '🔲',
+  '🏁',
+  '🚩',
+  '🎌',
+  '🏴',
+  '🏳️',
+  '🏳️‍🌈',
+  '🏳️‍⚧️',
+  '🏴‍☠️',
+  '🇦🇨',
+  '🇦🇩',
+  '🇦🇪',
+  '🇦🇫',
+  '🇦🇬',
+  '🇦🇮',
+  '🇦🇱',
+  '🇦🇲',
+  '🇦🇴',
+  '🇦🇶',
+  '🇦🇷',
+  '🇦🇸',
+  '🇦🇹',
+  '🇦🇺',
+  '🇦🇼',
+  '🇦🇽',
+  '🇦🇿',
+  '🇧🇦',
+  '🇧🇧',
+  '🇧🇩',
+  '🇧🇪',
+  '🇧🇫',
+  '🇧🇬',
+  '🇧🇭',
+  '🇧🇮',
+  '🇧🇯',
+  '🇧🇱',
+  '🇧🇲',
+  '🇧🇳',
+  '🇧🇴',
+  '🇧🇶',
+  '🇧🇷',
+  '🇧🇸',
+  '🇧🇹',
+  '🇧🇻',
+  '🇧🇼',
+  '🇧🇾',
+  '🇧🇿',
+  '🇨🇦',
+  '🇨🇨',
+  '🇨🇩',
+  '🇨🇫',
+  '🇨🇬',
+  '🇨🇭',
+  '🇨🇮',
+  '🇨🇰',
+  '🇨🇱',
+  '🇨🇲',
+  '🇨🇳',
+  '🇨🇴',
+  '🇨🇵',
+  '🇨🇷',
+  '🇨🇺',
+  '🇨🇻',
+  '🇨🇼',
+  '🇨🇽',
+  '🇨🇾',
+  '🇨🇿',
+  '🇩🇪',
+  '🇩🇬',
+  '🇩🇯',
+  '🇩🇰',
+  '🇩🇲',
+  '🇩🇴',
+  '🇩🇿',
+  '🇪🇦',
+  '🇪🇨',
+  '🇪🇪',
+  '🇪🇬',
+  '🇪🇭',
+  '🇪🇷',
+  '🇪🇸',
+  '🇪🇹',
+  '🇪🇺',
+  '🇫🇮',
+  '🇫🇯',
+  '🇫🇰',
+  '🇫🇲',
+  '🇫🇴',
+  '🇫🇷',
+  '🇬🇦',
+  '🇬🇧',
+  '🇬🇩',
+  '🇬🇪',
+  '🇬🇫',
+  '🇬🇬',
+  '🇬🇭',
+  '🇬🇮',
+  '🇬🇱',
+  '🇬🇲',
+  '🇬🇳',
+  '🇬🇵',
+  '🇬🇶',
+  '🇬🇷',
+  '🇬🇸',
+  '🇬🇹',
+  '🇬🇺',
+  '🇬🇼',
+  '🇬🇾',
+  '🇭🇰',
+  '🇭🇲',
+  '🇭🇳',
+  '🇭🇷',
+  '🇭🇹',
+  '🇭🇺',
+  '🇮🇨',
+  '🇮🇩',
+  '🇮🇪',
+  '🇮🇱',
+  '🇮🇲',
+  '🇮🇳',
+  '🇮🇴',
+  '🇮🇶',
+  '🇮🇷',
+  '🇮🇸',
+  '🇮🇹',
+  '🇯🇪',
+  '🇯🇲',
+  '🇯🇴',
+  '🇯🇵',
+  '🇰🇪',
+  '🇰🇬',
+  '🇰🇭',
+  '🇰🇮',
+  '🇰🇲',
+  '🇰🇳',
+  '🇰🇵',
+  '🇰🇷',
+  '🇰🇼',
+  '🇰🇾',
+  '🇰🇿',
+  '🇱🇦',
+  '🇱🇧',
+  '🇱🇨',
+  '🇱🇮',
+  '🇱🇰',
+  '🇱🇷',
+  '🇱🇸',
+  '🇱🇹',
+  '🇱🇺',
+  '🇱🇻',
+  '🇱🇾',
+  '🇲🇦',
+  '🇲🇨',
+  '🇲🇩',
+  '🇲🇪',
+  '🇲🇫',
+  '🇲🇬',
+  '🇲🇭',
+  '🇲🇰',
+  '🇲🇱',
+  '🇲🇲',
+  '🇲🇳',
+  '🇲🇴',
+  '🇲🇵',
+  '🇲🇶',
+  '🇲🇷',
+  '🇲🇸',
+  '🇲🇹',
+  '🇲🇺',
+  '🇲🇻',
+  '🇲🇼',
+  '🇲🇽',
+  '🇲🇾',
+  '🇲🇿',
+  '🇳🇦',
+  '🇳🇨',
+  '🇳🇪',
+  '🇳🇫',
+  '🇳🇬',
+  '🇳🇮',
+  '🇳🇱',
+  '🇳🇴',
+  '🇳🇵',
+  '🇳🇷',
+  '🇳🇺',
+  '🇳🇿',
+  '🇴🇲',
+  '🇵🇦',
+  '🇵🇪',
+  '🇵🇫',
+  '🇵🇬',
+  '🇵🇭',
+  '🇵🇰',
+  '🇵🇱',
+  '🇵🇲',
+  '🇵🇳',
+  '🇵🇷',
+  '🇵🇸',
+  '🇵🇹',
+  '🇵🇼',
+  '🇵🇾',
+  '🇶🇦',
+  '🇷🇪',
+  '🇷🇴',
+  '🇷🇸',
+  '🇷🇺',
+  '🇷🇼',
+  '🇸🇦',
+  '🇸🇧',
+  '🇸🇨',
+  '🇸🇩',
+  '🇸🇪',
+  '🇸🇬',
+  '🇸🇭',
+  '🇸🇮',
+  '🇸🇯',
+  '🇸🇰',
+  '🇸🇱',
+  '🇸🇲',
+  '🇸🇳',
+  '🇸🇴',
+  '🇸🇷',
+  '🇸🇸',
+  '🇸🇹',
+  '🇸🇻',
+  '🇸🇽',
+  '🇸🇾',
+  '🇸🇿',
+  '🇹🇦',
+  '🇹🇨',
+  '🇹🇩',
+  '🇹🇫',
+  '🇹🇬',
+  '🇹🇭',
+  '🇹🇯',
+  '🇹🇰',
+  '🇹🇱',
+  '🇹🇲',
+  '🇹🇳',
+  '🇹🇴',
+  '🇹🇷',
+  '🇹🇹',
+  '🇹🇻',
+  '🇹🇼',
+  '🇹🇿',
+  '🇺🇦',
+  '🇺🇬',
+  '🇺🇲',
+  '🇺🇳',
+  '🇺🇸',
+  '🇺🇾',
+  '🇺🇿',
+  '🇻🇦',
+  '🇻🇨',
+  '🇻🇪',
+  '🇻🇬',
+  '🇻🇮',
+  '🇻🇳',
+  '🇻🇺',
+  '🇼🇫',
+  '🇼🇸',
+  '🇽🇰',
+  '🇾🇪',
+  '🇾🇹',
+  '🇿🇦',
+  '🇿🇲',
+  '🇿🇼',
+  '🏴󠁧󠁢󠁥󠁮󠁧󠁿',
+  '🏴󠁧󠁢󠁳󠁣󠁴󠁿',
+  '🏴󠁧󠁢󠁷󠁬󠁳󠁿',
+]
diff --git a/apps/builder/components/shared/TypebotHeader/EditableTypebotIcons.tsx b/apps/builder/components/shared/TypebotHeader/EditableTypebotIcons.tsx
new file mode 100644
index 000000000..36a6de1b1
--- /dev/null
+++ b/apps/builder/components/shared/TypebotHeader/EditableTypebotIcons.tsx
@@ -0,0 +1,48 @@
+import {
+  Popover,
+  Tooltip,
+  chakra,
+  PopoverTrigger,
+  PopoverContent,
+} from '@chakra-ui/react'
+import React from 'react'
+import { ImageUploadContent } from '../ImageUploadContent'
+import { TypebotIcon } from './TypebotIcon'
+
+type Props = { icon?: string | null; onChangeIcon: (icon: string) => void }
+
+export const EditableTypebotIcon = ({ icon, onChangeIcon }: Props) => {
+  return (
+    <Popover isLazy>
+      {({ onClose }) => (
+        <>
+          <Tooltip label="Change icon">
+            <chakra.span
+              cursor="pointer"
+              px="2"
+              rounded="md"
+              _hover={{ bgColor: 'gray.100' }}
+              transition="background-color 0.2s"
+              data-testid="editable-icon"
+            >
+              <PopoverTrigger>
+                <chakra.span>
+                  <TypebotIcon icon={icon} emojiFontSize="2xl" />
+                </chakra.span>
+              </PopoverTrigger>
+            </chakra.span>
+          </Tooltip>
+          <PopoverContent p="2">
+            <ImageUploadContent
+              url={icon ?? ''}
+              onSubmit={onChangeIcon}
+              isGiphyEnabled={false}
+              isEmojiEnabled={true}
+              onClose={onClose}
+            />
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
+  )
+}
diff --git a/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx b/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx
index aecc7830a..1e3e001b8 100644
--- a/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx
+++ b/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx
@@ -24,7 +24,6 @@ export const EditableTypebotName = ({ name, onNewName }: EditableProps) => {
           overflow="hidden"
           display="flex"
           alignItems="center"
-          minW="100px"
         />
         <EditableInput />
       </Editable>
diff --git a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
index f81345775..7c508355f 100644
--- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
+++ b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
@@ -16,6 +16,7 @@ import React from 'react'
 import { isNotDefined } from 'utils'
 import { PublishButton } from '../buttons/PublishButton'
 import { CollaborationMenuButton } from './CollaborationMenuButton'
+import { EditableTypebotIcon } from './EditableTypebotIcons'
 import { EditableTypebotName } from './EditableTypebotName'
 
 export const headerHeight = 56
@@ -26,6 +27,7 @@ export const TypebotHeader = () => {
   const {
     typebot,
     updateOnBothTypebots,
+    updateTypebot,
     save,
     undo,
     redo,
@@ -37,6 +39,8 @@ export const TypebotHeader = () => {
 
   const handleNameSubmit = (name: string) => updateOnBothTypebots({ name })
 
+  const handleChangeIcon = (icon: string) => updateTypebot({ icon })
+
   const handlePreviewClick = async () => {
     save().then()
     setRightPanel(RightPanel.PREVIEW)
@@ -50,7 +54,7 @@ export const TypebotHeader = () => {
       align="center"
       pos="relative"
       h={`${headerHeight}px`}
-      zIndex={2}
+      zIndex={100}
       bgColor="white"
       flexShrink={0}
     >
@@ -105,7 +109,7 @@ export const TypebotHeader = () => {
         align="center"
         spacing="6"
       >
-        <HStack alignItems="center">
+        <HStack alignItems="center" spacing={4}>
           <IconButton
             as={NextChakraLink}
             aria-label="Navigate back"
@@ -118,33 +122,42 @@ export const TypebotHeader = () => {
                 : '/typebots'
             }
           />
-          {typebot?.name && (
-            <EditableTypebotName
-              name={typebot?.name}
-              onNewName={handleNameSubmit}
+          <HStack spacing={1}>
+            <EditableTypebotIcon
+              icon={typebot?.icon}
+              onChangeIcon={handleChangeIcon}
             />
-          )}
-          <Tooltip label="Undo">
-            <IconButton
-              display={['none', 'flex']}
-              icon={<UndoIcon />}
-              size="sm"
-              aria-label="Undo"
-              onClick={undo}
-              isDisabled={!canUndo}
-            />
-          </Tooltip>
+            {typebot?.name && (
+              <EditableTypebotName
+                name={typebot?.name}
+                onNewName={handleNameSubmit}
+              />
+            )}
+          </HStack>
 
-          <Tooltip label="Redo">
-            <IconButton
-              display={['none', 'flex']}
-              icon={<RedoIcon />}
-              size="sm"
-              aria-label="Redo"
-              onClick={redo}
-              isDisabled={!canRedo}
-            />
-          </Tooltip>
+          <HStack>
+            <Tooltip label="Undo">
+              <IconButton
+                display={['none', 'flex']}
+                icon={<UndoIcon />}
+                size="sm"
+                aria-label="Undo"
+                onClick={undo}
+                isDisabled={!canUndo}
+              />
+            </Tooltip>
+
+            <Tooltip label="Redo">
+              <IconButton
+                display={['none', 'flex']}
+                icon={<RedoIcon />}
+                size="sm"
+                aria-label="Redo"
+                onClick={redo}
+                isDisabled={!canRedo}
+              />
+            </Tooltip>
+          </HStack>
         </HStack>
         {isSavingLoading && (
           <HStack>
diff --git a/apps/builder/components/shared/TypebotHeader/TypebotIcon.tsx b/apps/builder/components/shared/TypebotHeader/TypebotIcon.tsx
new file mode 100644
index 000000000..d6f9a2fc0
--- /dev/null
+++ b/apps/builder/components/shared/TypebotHeader/TypebotIcon.tsx
@@ -0,0 +1,37 @@
+import { ToolIcon } from 'assets/icons'
+import React from 'react'
+import { chakra, Image } from '@chakra-ui/react'
+
+type Props = {
+  icon?: string | null
+  emojiFontSize?: string
+  boxSize?: string
+}
+
+export const TypebotIcon = ({
+  icon,
+  boxSize = '25px',
+  emojiFontSize,
+}: Props) => {
+  return (
+    <>
+      {icon ? (
+        icon.startsWith('http') ? (
+          <Image
+            src={icon}
+            boxSize={boxSize}
+            objectFit={icon.endsWith('.svg') ? undefined : 'cover'}
+            alt="typebot icon"
+            rounded="md"
+          />
+        ) : (
+          <chakra.span role="img" fontSize={emojiFontSize}>
+            {icon}
+          </chakra.span>
+        )
+      ) : (
+        <ToolIcon boxSize={boxSize} />
+      )}
+    </>
+  )
+}
diff --git a/apps/builder/components/shared/buttons/UploadButton.tsx b/apps/builder/components/shared/buttons/UploadButton.tsx
index c5f1f5c79..21301c2e8 100644
--- a/apps/builder/components/shared/buttons/UploadButton.tsx
+++ b/apps/builder/components/shared/buttons/UploadButton.tsx
@@ -36,7 +36,7 @@ export const UploadButton = ({
         id="file-input"
         display="none"
         onChange={handleInputChange}
-        accept=".jpg, .jpeg, .png"
+        accept=".jpg, .jpeg, .png, .svg"
       />
       <Button
         as="label"
diff --git a/apps/builder/contexts/TypebotContext/TypebotContext.tsx b/apps/builder/contexts/TypebotContext/TypebotContext.tsx
index 7dae7ac23..7a59b977c 100644
--- a/apps/builder/contexts/TypebotContext/TypebotContext.tsx
+++ b/apps/builder/contexts/TypebotContext/TypebotContext.tsx
@@ -52,6 +52,7 @@ type UpdateTypebotPayload = Partial<{
   publicId: string
   name: string
   publishedTypebotId: string
+  icon: string
 }>
 
 export type SetTypebot = (
@@ -167,10 +168,6 @@ export const TypebotContext = ({
       new Date(typebot.updatedAt) >
       new Date(currentTypebotRef.current.updatedAt)
     ) {
-      console.log(
-        new Date(typebot.updatedAt),
-        new Date(currentTypebotRef.current.updatedAt)
-      )
       setLocalTypebot({ ...typebot })
     }
 
diff --git a/apps/builder/package.json b/apps/builder/package.json
index ec28309f1..8673cc3dd 100644
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@@ -45,6 +45,7 @@
     "db": "*",
     "deep-object-diff": "^1.1.7",
     "dequal": "^2.0.2",
+    "emoji-mart": "^3.0.1",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4",
     "google-auth-library": "^7.14.0",
@@ -87,6 +88,7 @@
   "devDependencies": {
     "@playwright/test": "^1.19.2",
     "@types/canvas-confetti": "^1.4.2",
+    "@types/emoji-mart": "^3.0.9",
     "@types/google-spreadsheet": "^3.1.5",
     "@types/jsonwebtoken": "8.5.8",
     "@types/micro-cors": "^0.1.2",
diff --git a/apps/builder/pages/api/typebots.ts b/apps/builder/pages/api/typebots.ts
index c8cf24318..15cafdddd 100644
--- a/apps/builder/pages/api/typebots.ts
+++ b/apps/builder/pages/api/typebots.ts
@@ -46,7 +46,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
           folderId,
         },
         orderBy: { createdAt: 'desc' },
-        select: { name: true, publishedTypebotId: true, id: true },
+        select: { name: true, publishedTypebotId: true, id: true, icon: true },
       })
       return res.send({ typebots })
     }
diff --git a/apps/builder/pages/api/users/[id]/sharedTypebots.ts b/apps/builder/pages/api/users/[id]/sharedTypebots.ts
index 3665477b1..196bcddaa 100644
--- a/apps/builder/pages/api/users/[id]/sharedTypebots.ts
+++ b/apps/builder/pages/api/users/[id]/sharedTypebots.ts
@@ -18,7 +18,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const sharedTypebots = await prisma.collaboratorsOnTypebots.findMany({
       where: { userId: user.id },
       include: {
-        typebot: { select: { name: true, publishedTypebotId: true, id: true } },
+        typebot: {
+          select: {
+            name: true,
+            publishedTypebotId: true,
+            id: true,
+            icon: true,
+          },
+        },
       },
     })
     return res.send({
diff --git a/apps/builder/playwright/services/database.ts b/apps/builder/playwright/services/database.ts
index aff396b09..784cf0f68 100644
--- a/apps/builder/playwright/services/database.ts
+++ b/apps/builder/playwright/services/database.ts
@@ -173,6 +173,7 @@ const parseTestTypebot = (partialTypebot: Partial<Typebot>): Typebot => ({
   createdAt: new Date().toISOString(),
   publishedTypebotId: null,
   customDomain: null,
+  icon: null,
   variables: [{ id: 'var1', name: 'var1' }],
   ...partialTypebot,
   edges: [
diff --git a/apps/builder/playwright/tests/editor.spec.ts b/apps/builder/playwright/tests/editor.spec.ts
index 42babbf15..e5ef9c98f 100644
--- a/apps/builder/playwright/tests/editor.spec.ts
+++ b/apps/builder/playwright/tests/editor.spec.ts
@@ -125,4 +125,28 @@ test.describe.parallel('Editor', () => {
     await page.click('button[aria-label="Redo"]')
     await expect(page.locator('text="Block #1"')).toBeHidden()
   })
+
+  test('Rename and icon change should work', async ({ page }) => {
+    const typebotId = cuid()
+    await createTypebots([
+      {
+        id: typebotId,
+        name: 'My awesome typebot',
+        ...parseDefaultBlockWithStep({
+          type: InputStepType.TEXT,
+          options: defaultTextInputOptions,
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+    await page.click('text="My awesome typebot"')
+    await page.fill('input[value="My awesome typebot"]', 'My superb typebot')
+    await page.click('[data-testid="editable-icon"]')
+    await page.fill('input[placeholder="Search..."]', 'love')
+    await page.click('text="😍"')
+    await page.goto(`/typebots`)
+    await expect(page.locator('text="😍"')).toBeVisible()
+    await expect(page.locator('text="My superb typebot"')).toBeVisible()
+  })
 })
diff --git a/apps/builder/services/publicTypebot.tsx b/apps/builder/services/publicTypebot.tsx
index 27533f611..beb0ea3cb 100644
--- a/apps/builder/services/publicTypebot.tsx
+++ b/apps/builder/services/publicTypebot.tsx
@@ -37,6 +37,7 @@ export const parsePublicTypebotToTypebot = (
   publishedTypebotId: typebot.id,
   folderId: existingTypebot.folderId,
   ownerId: existingTypebot.ownerId,
+  icon: existingTypebot.icon,
 })
 
 export const createPublishedTypebot = async (typebot: PublicTypebot) =>
diff --git a/apps/builder/services/typebots/typebots.ts b/apps/builder/services/typebots/typebots.ts
index 14cf163f6..463b5b34b 100644
--- a/apps/builder/services/typebots/typebots.ts
+++ b/apps/builder/services/typebots/typebots.ts
@@ -56,7 +56,7 @@ import { Plan, User } from 'db'
 
 export type TypebotInDashboard = Pick<
   Typebot,
-  'id' | 'name' | 'publishedTypebotId'
+  'id' | 'name' | 'publishedTypebotId' | 'icon'
 >
 export const useTypebots = ({
   folderId,
@@ -351,6 +351,7 @@ export const parseNewTypebot = ({
   | 'publishedTypebotId'
   | 'publicId'
   | 'customDomain'
+  | 'icon'
 > => {
   const startBlockId = cuid()
   const startStepId = cuid()
diff --git a/apps/builder/services/user/sharedTypebots.ts b/apps/builder/services/user/sharedTypebots.ts
index 6ad89bdf3..21f912399 100644
--- a/apps/builder/services/user/sharedTypebots.ts
+++ b/apps/builder/services/user/sharedTypebots.ts
@@ -30,7 +30,12 @@ export const useSharedTypebots = ({
   onError: (error: Error) => void
 }) => {
   const { data, error, mutate } = useSWR<
-    { sharedTypebots: Pick<Typebot, 'name' | 'id' | 'publishedTypebotId'>[] },
+    {
+      sharedTypebots: Pick<
+        Typebot,
+        'name' | 'id' | 'publishedTypebotId' | 'icon'
+      >[]
+    },
     Error
   >(userId ? `/api/users/${userId}/sharedTypebots` : null, fetcher)
   if (error) onError(error)
diff --git a/apps/viewer/playwright/services/database.ts b/apps/viewer/playwright/services/database.ts
index 689e9079f..696e310e5 100644
--- a/apps/viewer/playwright/services/database.ts
+++ b/apps/viewer/playwright/services/database.ts
@@ -76,6 +76,7 @@ const parseTestTypebot = (partialTypebot: Partial<Typebot>): Typebot => ({
   folderId: null,
   name: 'My typebot',
   ownerId: 'proUser',
+  icon: null,
   theme: defaultTheme,
   settings: defaultSettings,
   publicId: partialTypebot.id + '-public',
diff --git a/packages/db/package.json b/packages/db/package.json
index d6b90891f..cb8795a37 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -14,7 +14,7 @@
     "@prisma/client": "^3.10.0"
   },
   "scripts": {
-    "dx": "dotenv -e ../../apps/builder/.env.local prisma db push && yarn start:sutdio  ",
+    "dx": "dotenv -e ../../apps/builder/.env.local prisma db push && yarn generate:schema && yarn start:sutdio  ",
     "build": "yarn generate:schema",
     "start:sutdio": "dotenv -e ../../apps/builder/.env.local -v BROWSER=none prisma studio",
     "generate:schema": "dotenv -e ../../apps/builder/.env.local prisma generate",
diff --git a/packages/db/prisma/migrations/20220401140029_add_icon_on_typebot/migration.sql b/packages/db/prisma/migrations/20220401140029_add_icon_on_typebot/migration.sql
new file mode 100644
index 000000000..f5a1ccad6
--- /dev/null
+++ b/packages/db/prisma/migrations/20220401140029_add_icon_on_typebot/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Typebot" ADD COLUMN     "icon" TEXT;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 36789abfd..01afc9b6d 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -114,6 +114,7 @@ model Typebot {
   id                 String                    @id @default(cuid())
   createdAt          DateTime                  @default(now())
   updatedAt          DateTime                  @default(now()) @updatedAt
+  icon               String?
   name               String
   ownerId            String
   owner              User                      @relation(fields: [ownerId], references: [id], onDelete: Cascade)
diff --git a/yarn.lock b/yarn.lock
index 80e51e465..066601657 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4104,6 +4104,13 @@
   dependencies:
     cssnano "*"
 
+"@types/emoji-mart@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/emoji-mart/-/emoji-mart-3.0.9.tgz#2f7ef5d9ec194f28029c46c81a5fc1e5b0efa73c"
+  integrity sha512-qdBo/2Y8MXaJ/2spKjDZocuq79GpnOhkwMHnK2GnVFa8WYFgfA+ei6sil3aeWQPCreOKIx9ogPpR5+7MaOqYAA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
@@ -7315,6 +7322,14 @@ emittery@^0.8.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
+emoji-mart@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-3.0.1.tgz#9ce86706e02aea0506345f98464814a662ca54c6"
+  integrity sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    prop-types "^15.6.0"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"