diff --git a/example/package.json b/example/package.json
index 5d7cfe4a0d..0f2277ae7d 100644
--- a/example/package.json
+++ b/example/package.json
@@ -67,8 +67,8 @@
     "stylelint": "13.13.1",
     "typescript": "^4.5.2",
     "vite": "^4.2.1",
-    "vite-plugin-fast-react-svg": "^0.4.0",
     "vite-plugin-raw": "^1.0.3",
+    "vite-plugin-svgr": "^2.4.0",
     "webpack-bundle-analyzer": "^4.8.0"
   },
   "browserslist": {
diff --git a/example/vite.config.js b/example/vite.config.js
index 48267b0fdb..2a2594774c 100644
--- a/example/vite.config.js
+++ b/example/vite.config.js
@@ -2,7 +2,7 @@ import replace from '@rollup/plugin-replace'
 import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
 import { defineConfig, loadEnv } from 'vite'
-import { svgPlugin } from 'vite-plugin-fast-react-svg'
+import svgr from 'vite-plugin-svgr'
 import vitePluginRaw from 'vite-plugin-raw'
 import ketcherReactTSConfig from '../packages/ketcher-core/tsconfig.json'
 import { valuesToReplace as polymerEditorValues } from '../packages/ketcher-polymer-editor-react/rollup.config'
@@ -60,7 +60,9 @@ export default defineConfig({
   },
   plugins: [
     react(),
-    svgPlugin(),
+    svgr({
+      exportAsDefault: true
+    }),
     vitePluginRaw({
       match: /\.sdf/
     }),