diff --git a/docs/assets/img/custom-button-preview-1.png b/docs/assets/img/custom-button-preview-1.png
new file mode 100644
index 00000000..4058706f
Binary files /dev/null and b/docs/assets/img/custom-button-preview-1.png differ
diff --git a/docs/assets/img/custom-button-preview-2.png b/docs/assets/img/custom-button-preview-2.png
new file mode 100644
index 00000000..f160b76c
Binary files /dev/null and b/docs/assets/img/custom-button-preview-2.png differ
diff --git a/docs/assets/img/custom-button-preview-3.png b/docs/assets/img/custom-button-preview-3.png
new file mode 100644
index 00000000..68694001
Binary files /dev/null and b/docs/assets/img/custom-button-preview-3.png differ
diff --git a/docs/docs/api/modal.md b/docs/docs/api/modal.md
index 9f81d1b9..d5039b62 100644
--- a/docs/docs/api/modal.md
+++ b/docs/docs/api/modal.md
@@ -111,6 +111,18 @@ Reveal the search bar, used to find specific emoji.
 
 <ApiTable typeVal='boolean' defaultVal='false'/>
 
+### `hideSearchBarClearIcon`
+
+Hide the search bar clear icon inside the search input.
+
+<ApiTable typeVal='boolean' defaultVal='false'/>
+
+### `customButtons`
+
+Inject custom buttons into the component.
+
+<ApiTable typeVal='React.ReactNode' defaultVal='null'/>
+
 ### `enableCategoryChangeAnimation`
 
 Allow to turn off FlatList scrolling animation when category is changed.
diff --git a/docs/docs/documentation/Examples/custom-buttons.mdx b/docs/docs/documentation/Examples/custom-buttons.mdx
new file mode 100644
index 00000000..98b5268d
--- /dev/null
+++ b/docs/docs/documentation/Examples/custom-buttons.mdx
@@ -0,0 +1,63 @@
+---
+sidebar_position: 13
+title: Custom Buttons
+---
+
+import preview1 from '../../../assets/img/custom-button-preview-1.png'
+import preview2 from '../../../assets/img/custom-button-preview-2.png'
+import preview3 from '../../../assets/img/custom-button-preview-3.png'
+
+:::info
+To preview app with this example, clone [**github repo**](https://github.com/TheWidlarzGroup/rn-emoji-keyboard.git) and run `yarn example ios` or `yarn example android`.
+:::
+
+### Usage
+
+We've introduced a custom button feature to provide you with the flexibility to add your unique functionality to our interface.
+
+The `customButtons` prop allows you to inject custom buttons into the `EmojiPicker` component, enabling additional functionalities or actions within the emoji picker interface. This flexible prop accepts an array of React elements, allowing for multiple custom buttons to be specified.
+
+To use the `customButtons` prop, pass an array of React components that you wish to render as buttons within the emoji picker. Each component must be assigned a unique key prop to help React identify which items have changed, are being added, or are removed.
+
+If search bar is enabled, custom buttons shows next to it.
+
+The `DeleteButton` is a pre-designed component that can be used within the `EmojiPicker` as part of the customButtons prop array. You can add `onPress` prop with a function that will be called when the DeleteButton is pressed. This allows you to define the specific action that should occur on press, such as deleting an emoji from the input field.
+. You can add any pressableProps you need to this custom component.
+
+```jsx
+import EmojiPicker from 'rn-emoji-keyboard'
+
+const ExampleComponent = () => {
+  // ...
+
+  return (
+    <EmojiPicker
+      onEmojiSelected={handlePick}
+      open={isModalOpen}
+      onClose={() => setIsModalOpen(false)}
+      enableSearchBar
+      customButtons={[
+        <DeleteButton
+          key="deleteButton"
+          onPress={deleteLastEmoji}
+          style={({ pressed }) => ({
+            backgroundColor: pressed ? '#000' : '#e1e1e1',
+            padding: 10,
+            borderRadius: 100,
+          })}
+          iconNormalColor="#000"
+          iconActiveColor="#fff"
+        />,
+      ]}
+      allowMultipleSelections
+      categoryPosition="top"
+    />
+  )
+}
+```
+
+<div className="gallery">
+  <img src={preview1} alt="First Image" />
+  <img src={preview2} alt="Second Image" />
+  <img src={preview3} alt="Third Image" />
+</div>
diff --git a/docs/docs/documentation/Examples/dark.md b/docs/docs/documentation/Examples/dark.md
index ac55f3b0..f28afa64 100644
--- a/docs/docs/documentation/Examples/dark.md
+++ b/docs/docs/documentation/Examples/dark.md
@@ -6,7 +6,7 @@ title: Dark Mode
 We do not provide a prop that will directly enable dark mode, but with the ability to adjust theme, you can easily achieve it
 using theme prop.
 
-```tsx
+```jsx
 <EmojiPicker
   onEmojiSelected={handlePick}
   open={isModalOpen}
@@ -29,3 +29,38 @@ using theme prop.
 
 The effect of the above code.
 ![The effect of the above code](../../../assets/img/dark-mode-preview.jpg)
+
+Above, the `theme` property is displayed with the styles required for the basic version of the EmojiPicker. Below, you'll find the `theme` property showcasing all available styles.
+
+```jsx
+<EmojiPicker
+  onEmojiSelected={handlePick}
+  open={isModalOpen}
+  onClose={() => setIsModalOpen(false)}
+  theme={{
+    backdrop: '#16161888',
+    knob: '#766dfc',
+    container: '#282829',
+    header: '#fff',
+    skinTonesContainer: '#252427',
+    category: {
+      icon: '#766dfc',
+      iconActive: '#fff',
+      container: '#252427',
+      containerActive: '#766dfc',
+    },
+    customButton: {
+      icon: '#766dfc',
+      iconPressed: '#fff',
+      background: '#252427',
+      backgroundPressed: '#766dfc',
+    },
+    search: {
+      text: '#fff',
+      placeholder: '#ffffff2c',
+      icon: '#fff',
+      background: '#00000011',
+    },
+  }}
+/>
+```
diff --git a/docs/docs/documentation/Examples/search.md b/docs/docs/documentation/Examples/search.md
index 9d93077a..fa8d4014 100644
--- a/docs/docs/documentation/Examples/search.md
+++ b/docs/docs/documentation/Examples/search.md
@@ -11,6 +11,8 @@ To preview app with this example, clone [**github repo**](https://github.com/The
 
 If you want to reveal the search bar, used to find specific emoji, just pass `enableSearchBar` to `EmojiPicker`.
 
+You can also choose whether to display the search bar clear icon (which appears when you type something in search input). To hide this icon, pass the `hideSearchBarClearIcon` prop to `EmojiPicker`.
+
 ```jsx
 import EmojiPicker from 'rn-emoji-keyboard'
 
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 239f26d2..637394d2 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -46,3 +46,34 @@
   font-weight: 700;
   src: local('JetBrainsMono'), url(../../assets/fonts/JetBrainsMono-Bold.woff2) format('woff2');
 }
+
+.gallery {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+}
+
+.gallery img {
+  width: 32%;
+  margin-right: 2%;
+}
+
+.gallery img:last-child {
+  margin-right: 0;
+}
+
+@media (max-width: 768px) {
+  .gallery {
+    flex-direction: column;
+  }
+  .gallery img {
+    width: 100%;
+    margin-right: 0px;
+    margin-bottom: 20px;
+  }
+
+  .gallery img:last-child {
+    margin-right: 0;
+  }
+}
diff --git a/example/app/(examples)/custom-buttons.tsx b/example/app/(examples)/custom-buttons.tsx
new file mode 100644
index 00000000..b1c343b1
--- /dev/null
+++ b/example/app/(examples)/custom-buttons.tsx
@@ -0,0 +1,53 @@
+import { Button } from 'example/src/components/Button'
+import React from 'react'
+import { Results } from 'example/src/components/Results'
+import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'
+import { DeleteButton } from '../../../src/components/DeleteButton'
+
+export default function () {
+  const [result, setResult] = React.useState<string>()
+  const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false)
+
+  const handlePick = (emoji: EmojiType) => {
+    console.log(emoji)
+    setResult(emoji.emoji)
+    setIsModalOpen((prev) => !prev)
+  }
+
+  const deleteLastEmoji = () => {
+    if (result) {
+      let arrayFromString = Array.from(result)
+      arrayFromString.pop()
+      setResult(arrayFromString.join(''))
+    }
+  }
+
+  return (
+    <>
+      <Results label={result} />
+      <Button onPress={() => setIsModalOpen(true)} label="Open" />
+
+      <EmojiPicker
+        onEmojiSelected={handlePick}
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        enableSearchBar
+        customButtons={[
+          <DeleteButton
+            key="deleteButton"
+            onPress={deleteLastEmoji}
+            style={({ pressed }) => ({
+              backgroundColor: pressed ? '#000' : '#e1e1e1',
+              padding: 10,
+              borderRadius: 100,
+            })}
+            iconNormalColor="#000"
+            iconActiveColor="#fff"
+          />,
+        ]}
+        allowMultipleSelections
+        categoryPosition="top"
+      />
+    </>
+  )
+}
diff --git a/example/app/index.tsx b/example/app/index.tsx
index 6767ed3f..8965af1e 100644
--- a/example/app/index.tsx
+++ b/example/app/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-
 import { StyleSheet, View } from 'react-native'
 import { Link } from 'example/src/components/Link'
 import { Stack } from 'expo-router'
@@ -18,6 +17,7 @@ export const screens = {
   '/search': 'Search Bar',
   '/selected-emojis': 'Selected Emojis',
   '/translated': 'Translated',
+  '/custom-buttons': 'Custom Button',
 } as const
 
 export default function App() {
diff --git a/src/assets/icons/backspace.png b/src/assets/icons/backspace.png
new file mode 100644
index 00000000..8e0cd668
Binary files /dev/null and b/src/assets/icons/backspace.png differ
diff --git a/src/components/DeleteButton.tsx b/src/components/DeleteButton.tsx
new file mode 100644
index 00000000..0727b89c
--- /dev/null
+++ b/src/components/DeleteButton.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type PressableProps,
+} from 'react-native'
+import { KeyboardContext } from '../contexts/KeyboardContext'
+import { Icon } from './Icon'
+
+type CustomButtonType = {
+  containerStyle?: StyleProp<ViewStyle>
+  iconNormalColor?: string
+  iconActiveColor?: string
+} & PressableProps
+
+export const DeleteButton = ({
+  containerStyle,
+  iconNormalColor,
+  iconActiveColor,
+  ...pressableProps
+}: CustomButtonType) => {
+  const { theme } = React.useContext(KeyboardContext)
+  return (
+    <View style={[styles.buttonContainer, containerStyle]}>
+      <Pressable
+        style={({ pressed }) => [
+          {
+            backgroundColor: pressed
+              ? theme.customButton.backgroundPressed
+              : theme.customButton.background,
+            padding: 8,
+            borderRadius: 100,
+          },
+          styles.button,
+        ]}
+        {...pressableProps}
+      >
+        {({ pressed }) => (
+          <Icon
+            iconName="Backspace"
+            isActive={pressed}
+            normalColor={iconNormalColor || theme.customButton.icon}
+            activeColor={iconActiveColor || theme.customButton.iconPressed}
+          />
+        )}
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    marginTop: 16,
+    marginLeft: 8,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
diff --git a/src/components/EmojiStaticKeyboard.tsx b/src/components/EmojiStaticKeyboard.tsx
index b8194e76..a746c465 100644
--- a/src/components/EmojiStaticKeyboard.tsx
+++ b/src/components/EmojiStaticKeyboard.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-
 import {
   StyleSheet,
   View,
@@ -30,6 +29,7 @@ export const EmojiStaticKeyboard = React.memo(
       enableCategoryChangeGesture,
       categoryPosition,
       enableSearchBar,
+      customButtons,
       searchPhrase,
       renderList,
       disableSafeArea,
@@ -139,9 +139,18 @@ export const EmojiStaticKeyboard = React.memo(
           )}
         >
           <>
-            {enableSearchBar && (
-              <SearchBar scrollEmojiCategoryListToIndex={scrollEmojiCategoryListToIndex} />
-            )}
+            <View
+              style={
+                categoryPosition === 'top'
+                  ? [styles.searchContainer, { marginBottom: 16 }]
+                  : styles.searchContainer
+              }
+            >
+              {enableSearchBar && (
+                <SearchBar scrollEmojiCategoryListToIndex={scrollEmojiCategoryListToIndex} />
+              )}
+              {customButtons}
+            </View>
             <Animated.FlatList<EmojisByCategory>
               extraData={[keyboardState.recentlyUsed.length, searchPhrase]}
               data={renderList}
@@ -181,6 +190,11 @@ const styles = StyleSheet.create({
     flex: 1,
     borderRadius: 16,
   },
+  searchContainer: {
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
   containerReverse: { flexDirection: 'column-reverse' },
   containerShadow: {
     shadowColor: 'black',
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 3bbd7ab5..ce944382 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -10,7 +10,7 @@ export const Icon = ({
   normalColor,
   activeColor,
 }: {
-  iconName: IconNames | 'Close' | 'QuestionMark'
+  iconName: IconNames | 'Close' | 'QuestionMark' | 'Backspace'
   isActive: boolean
   normalColor: string
   activeColor: string
@@ -43,6 +43,8 @@ export const Icon = ({
       return <PngIcon fill={color} source={require('../assets/icons/clock.png')} />
     case 'QuestionMark':
       return <PngIcon fill={color} source={require('../assets/icons/questionMark.png')} />
+    case 'Backspace':
+      return <PngIcon fill={color} source={require('../assets/icons/backspace.png')} />
     default:
       exhaustiveTypeCheck(iconName)
       return null
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 71aaf525..4a62562d 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -42,6 +42,7 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
       setShouldAnimateScroll(enableSearchAnimation)
     }
   }
+
   const clearPhrase = () => {
     setSearchPhrase('')
     clearEmojiTonesData()
@@ -86,12 +87,13 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
 const styles = StyleSheet.create({
   container: {
     marginTop: 16,
-    marginHorizontal: 16,
+    marginRight: 8,
     borderRadius: 100,
     borderWidth: 1,
     borderColor: '#00000011',
     flexDirection: 'row',
     alignItems: 'center',
+    flex: 1,
   },
   input: {
     paddingVertical: 8,
diff --git a/src/contexts/KeyboardContext.ts b/src/contexts/KeyboardContext.ts
index ebe598bc..e6bdb9ed 100644
--- a/src/contexts/KeyboardContext.ts
+++ b/src/contexts/KeyboardContext.ts
@@ -52,6 +52,12 @@ export type Theme = {
     placeholder: string
     icon: string
   }
+  customButton: {
+    icon: string
+    iconPressed: string
+    background: string
+    backgroundPressed: string
+  }
   emoji: {
     selected: string
   }
@@ -77,6 +83,7 @@ export type KeyboardProps = {
   categoryPosition?: CategoryPosition
   enableSearchBar?: boolean
   hideSearchBarClearIcon?: boolean
+  customButtons?: React.ReactNode
   categoryOrder?: CategoryTypes[]
   onRequestClose?: () => void
   disableSafeArea?: boolean
@@ -141,6 +148,12 @@ export const defaultTheme: Theme = {
     icon: '#00000055',
     background: '#00000011',
   },
+  customButton: {
+    icon: '#000000',
+    iconPressed: '#005b96',
+    background: '#00000011',
+    backgroundPressed: '#00000016',
+  },
   emoji: {
     selected: '#e3dbcd',
   },
@@ -165,6 +178,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> & {
   categoryPosition: 'floating',
   enableSearchBar: false,
   hideSearchBarClearIcon: false,
+  customButtons: null,
   categoryOrder: [...CATEGORIES],
   onRequestClose: () => {},
   disableSafeArea: false,