diff --git a/CHANGELOG.md b/CHANGELOG.md
index bcd9313..71ca875 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
This is an alpha version! The changes listed here are not final.
### Added
+- Add AI Client icon components
- AI Client: Add useAiSuggestions() react custom hook
### Changed
diff --git a/index.ts b/index.ts
index 6481a11..19241fe 100644
--- a/index.ts
+++ b/index.ts
@@ -5,4 +5,7 @@ export { default as askQuestion } from './src/ask-question';
// Hooks
export { default as useAiSuggestions } from './src/hooks/use-ai-suggestions';
+// Icons
+export * from './src/icons';
+
export * from './src/index.js';
diff --git a/package.json b/package.json
index b02450c..cc7f602 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
},
"type": "module",
"devDependencies": {
- "jest": "^29.6.1",
+ "@storybook/react": "7.1.0",
+ "jest": "^29.6.2",
"jest-environment-jsdom": "29.5.0",
"typescript": "5.0.4"
},
@@ -33,6 +34,7 @@
"@automattic/jetpack-shared-extension-utils": "^0.10.9",
"@microsoft/fetch-event-source": "2.0.1",
"@wordpress/api-fetch": "6.34.0",
+ "@wordpress/components": "25.3.0",
"@wordpress/data": "9.7.0",
"@wordpress/element": "5.14.0",
"@wordpress/i18n": "4.37.0",
diff --git a/src/icons/Readme.md b/src/icons/Readme.md
new file mode 100644
index 0000000..220908d
--- /dev/null
+++ b/src/icons/Readme.md
@@ -0,0 +1,22 @@
+# Icons
+
+This library provides you with a selection of icons to use in your Gutenberg applications.
+
+- aiAssistantIcon
+- origamiPlane
+- speakTone
+
+```jsx
+import { Icon } from '@wordpress/components';
+import { aiAssistantIcon } from '@automattic/jetpack-ai-client';
+
+function YourComponent() {
+ // ...
+ return (
+
+ // Your code here...
+
+
+ );
+}
+```
\ No newline at end of file
diff --git a/src/icons/ai-assistant.tsx b/src/icons/ai-assistant.tsx
new file mode 100644
index 0000000..e79a137
--- /dev/null
+++ b/src/icons/ai-assistant.tsx
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const aiAssistant = (
+
+);
+
+export default aiAssistant;
diff --git a/src/icons/index.ts b/src/icons/index.ts
new file mode 100644
index 0000000..2e9a066
--- /dev/null
+++ b/src/icons/index.ts
@@ -0,0 +1,3 @@
+export { default as aiAssistantIcon } from './ai-assistant';
+export { default as origamiPlane } from './origami-plane';
+export { default as speakTone } from './speak-tone';
diff --git a/src/icons/origami-plane.tsx b/src/icons/origami-plane.tsx
new file mode 100644
index 0000000..8802191
--- /dev/null
+++ b/src/icons/origami-plane.tsx
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const origamiPlane = (
+
+);
+
+export default origamiPlane;
diff --git a/src/icons/speak-tone.tsx b/src/icons/speak-tone.tsx
new file mode 100644
index 0000000..f5bbd0c
--- /dev/null
+++ b/src/icons/speak-tone.tsx
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const speakTone = (
+
+);
+
+export default speakTone;
diff --git a/src/icons/stories/index.stories.tsx b/src/icons/stories/index.stories.tsx
new file mode 100644
index 0000000..8fed3e6
--- /dev/null
+++ b/src/icons/stories/index.stories.tsx
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/components';
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+import * as allIcons from '../index';
+import styles from './style.module.scss';
+/**
+ * Types
+ */
+import type { Meta } from '@storybook/react';
+
+export default {
+ title: 'JS Packages/AI Client/Icons',
+ component: allIcons,
+ parameters: {},
+} as Meta< typeof allIcons >;
+
+/**
+ * Icons story components.
+ *
+ * @returns {object} - story component
+ */
+function IconsStory() {
+ return (
+
+ { Object.entries( allIcons ).map( ( [ name, icon ] ) => {
+ return (
+
+ );
+ } ) }
+