diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62381d5da..a30c6c46c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `EmptyState` at the `ProductGallery` section.
- `IconSVG` component to load SVG Icons.
- `Suggestions` component.
+- `SearchHistory` component.
### Changed
- Moved all icons to use Icon component
diff --git a/src/components/search/History/SearchHistory.tsx b/src/components/search/History/SearchHistory.tsx
new file mode 100644
index 000000000..67ae65f9f
--- /dev/null
+++ b/src/components/search/History/SearchHistory.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { Icon as UIIcon, List as UIList } from '@faststore/ui'
+import Button from 'src/components/ui/Button'
+import './search-history.scss'
+import Link from 'src/components/ui/Link'
+import Icon from 'src/components/ui/Icon'
+import useSearchHistory from 'src/sdk/search/useSeachHistory'
+import { formatSearchState, initSearchState } from '@faststore/sdk'
+
+interface SearchHistoryProps {
+ onClear: () => void
+}
+
+const doSearch = (term: string) => {
+ const { pathname, search } = formatSearchState(
+ initSearchState({
+ term,
+ base: '/s',
+ })
+ )
+
+ return `${pathname}${search}`
+}
+
+const SearchHistory = ({ onClear }: SearchHistoryProps) => {
+ const { searchHistory } = useSearchHistory()
+
+ return (
+
+
+
History
+
+
+
+ {searchHistory.map((item, index) => (
+
+
+ }
+ />
+ {item}
+
+ }
+ />
+
+
+ ))}
+
+
+ )
+}
+
+export default SearchHistory
diff --git a/src/components/search/History/index.tsx b/src/components/search/History/index.tsx
new file mode 100644
index 000000000..08e2ee333
--- /dev/null
+++ b/src/components/search/History/index.tsx
@@ -0,0 +1 @@
+export { default as SearchHistory } from './SearchHistory'
diff --git a/src/components/search/History/search-history.scss b/src/components/search/History/search-history.scss
new file mode 100644
index 000000000..cb34b750f
--- /dev/null
+++ b/src/components/search/History/search-history.scss
@@ -0,0 +1,45 @@
+@import "src/styles/scaffold";
+
+[data-store-search-history-header] {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-1);
+ padding-right: var(--space-3);
+ padding-left: var(--space-3);
+}
+
+[data-store-search-history-title] {
+ font-size: var(--text-size-3);
+}
+
+[data-store-search-history] {
+ padding: var(--space-1) var(--space-3) var(--space-2);
+ background-color: var(--bg-neutral-lightest);
+}
+
+[data-store-search-history-item] {
+ [data-store-link] {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-right: var(--space-3);
+ padding-left: var(--space-3);
+ color: var(--color-neutral-6);
+ font-size: var(--text-size-2);
+ }
+
+ [data-store-icon] {
+ display: flex;
+ &:first-of-type { margin-right: var(--space-1); }
+ }
+}
+
+[data-store-search-history-arrow] {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--space-4);
+ height: var(--space-4);
+ margin-left: auto;
+}
diff --git a/static/icons.svg b/static/icons.svg
index b88896fda..88351ca34 100644
--- a/static/icons.svg
+++ b/static/icons.svg
@@ -9,6 +9,7 @@
+
@@ -40,4 +41,5 @@
+