diff --git a/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx b/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx
index 5a2cd11c37a7e811412d02784f92c690ab6c9282..62fe9ae60503fd3dd572c3c79c1b5266c4639a8b 100644
--- a/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx
+++ b/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx
@@ -23,8 +23,7 @@ import {
 import { useFormik } from 'formik'
 import { useQueryClient } from 'react-query'
 
-import { GetPatternsQuery } from '../query-builder'
-import { CreatePatternMutation } from '../query-builder/create-pattern-mutation'
+import { CreatePatternMutation, GetPatternsQuery } from '../query-builder'
 
 import { CreatePatternSchema, createPatternSchema } from './schema'
 
diff --git a/web/src/pages/Patterns/patterns.tsx b/web/src/pages/Patterns/patterns.tsx
index 1e0226072be7f8892175812f305e953be9f71c01..0664c8beffded4361e1c271e63c46c572664c8f5 100644
--- a/web/src/pages/Patterns/patterns.tsx
+++ b/web/src/pages/Patterns/patterns.tsx
@@ -26,6 +26,7 @@ import { Pattern } from 'src/models'
 
 import { AddPatternButton } from './add-pattern'
 import { GetPatternsQuery } from './query-builder'
+import { RemovePatternIconButton } from './remove-pattern'
 
 const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']
 
@@ -123,11 +124,7 @@ const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
         variant="unstyled"
         icon={<Icon as={FaEdit} />}
       />
-      <IconButton
-        aria-label="delete pattern"
-        variant="unstyled"
-        icon={<Icon as={FaTrash} />}
-      />
+      <RemovePatternIconButton patternId={pattern.id} />
     </HStack>
   )
 }
diff --git a/web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts b/web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a729d895da3a0d7a8b649f7127c148deab9976bd
--- /dev/null
+++ b/web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts
@@ -0,0 +1,22 @@
+import axiosService from 'src/services/axios-service'
+import { useMutation as useRQMutation, UseMutationOptions } from 'react-query'
+import { AxiosError } from 'axios'
+
+export namespace DeletePatternMutation {
+  export type Params = { id: string }
+
+  export type Response = {}
+
+  export const key = ['delete', 'pattern']
+
+  export const mutationFn = (params: Params) =>
+    axiosService
+      .delete<Response>(`/pattern/${params.id}`)
+      .then((res) => res.data)
+
+  export const useMutation = (
+    options: UseMutationOptions<Response, AxiosError, Params> = {}
+  ) => {
+    return useRQMutation(mutationFn, { ...options, mutationKey: key })
+  }
+}
diff --git a/web/src/pages/Patterns/query-builder/index.ts b/web/src/pages/Patterns/query-builder/index.ts
index 249cf9fcf15b7179cc6112df7a166671c51f3dab..c1af81302cccecb10d23d9d467a23464a76caed5 100644
--- a/web/src/pages/Patterns/query-builder/index.ts
+++ b/web/src/pages/Patterns/query-builder/index.ts
@@ -1 +1,3 @@
 export * from './get-patterns-query'
+export * from './create-pattern-mutation'
+export * from './delete-pattern-mutation'
diff --git a/web/src/pages/Patterns/remove-pattern/index.ts b/web/src/pages/Patterns/remove-pattern/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..045e43b82b77e0b293cfd20530b083870f77e63d
--- /dev/null
+++ b/web/src/pages/Patterns/remove-pattern/index.ts
@@ -0,0 +1 @@
+export * from './remove-pattern-icon-button'
diff --git a/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx b/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..67799fc20c093e20f5d897aa80c8f2e5e8f5c1e6
--- /dev/null
+++ b/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { IconButtonProps, IconButton, Icon } from '@chakra-ui/react'
+import { FaTrash } from 'react-icons/fa'
+import { DeletePatternMutation, GetPatternsQuery } from '../query-builder'
+import { useQueryClient } from 'react-query'
+
+export type RemovePatternIconButtonProps = {
+  patternId: string
+} & Partial<IconButtonProps>
+
+export const RemovePatternIconButton: React.FC<
+  RemovePatternIconButtonProps
+> = ({ patternId, ...props }) => {
+  const queryClient = useQueryClient()
+
+  const deletePatternMutation = DeletePatternMutation.useMutation({
+    onSuccess: () => {
+      queryClient.invalidateQueries(GetPatternsQuery.getKey({}))
+    },
+  })
+
+  const handleDeletePattern = () => {
+    deletePatternMutation.mutate({ id: patternId })
+  }
+  return (
+    <IconButton
+      aria-label="view pattern"
+      variant="unstyled"
+      icon={<Icon as={FaTrash} />}
+      {...props}
+      onClick={handleDeletePattern}
+    />
+  )
+}