diff --git a/apps/presentationeditor/mobile/src/less/icons-common.less b/apps/presentationeditor/mobile/src/less/icons-common.less
index a907889672..b51059515f 100644
--- a/apps/presentationeditor/mobile/src/less/icons-common.less
+++ b/apps/presentationeditor/mobile/src/less/icons-common.less
@@ -22,4 +22,7 @@
 //         height: 22px;
 //         .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C14.6863 12 12 14.6863 12 18C12 21.3137 14.6863 24 18 24C21.3137 24 24 21.3137 24 18C24 14.6863 21.3137 12 18 12ZM18.7458 22V16.7307H21.2522V15.4956H18.7458H17.2265H14.7478V16.7307H17.2265V22H18.7458Z" fill="#A8A8A8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H13.101C11.8045 21.7295 11 19.9587 11 18C11 17.4576 11.0617 16.9296 11.1785 16.4226C9.86316 15.0952 8.20867 14.5842 6.37705 14.5842C5.6032 14.5842 4.85524 14.7369 4.15044 15.018C4.14616 15.0202 4.14224 15.0216 4.13776 15.0231L4.13654 15.0235C4.12921 15.0255 4.12161 15.0269 4.11419 15.0269C4.0511 15.0269 4 14.959 4 14.8755C4 14.8263 4.01769 14.7835 4.04393 14.7567C4.0454 14.7554 4.04681 14.754 4.04819 14.7527C4.05119 14.7498 4.05401 14.7471 4.05679 14.7448C5.28644 13.6439 6.76778 13.0011 8.36321 13.0011C9.48515 13.0011 10.5512 13.3196 11.5132 13.891C12.1885 13.2535 12.9445 12.7563 13.7571 12.432C14.9342 11.5336 16.4048 11 18 11C19.9587 11 21.7295 11.8045 23 13.101V4C23 2.34315 21.6569 1 20 1H4ZM19.9523 7.74897V7.74817C19.9256 7.72981 19.8987 7.71247 19.8719 7.69519L19.8513 7.68188C19.3128 7.33699 18.7196 7.11012 18.0893 7.03103C16.9751 6.89113 15.9103 7.23056 15.0106 7.92168C14.3943 7.45795 13.6965 7.156 12.9453 7.06171C11.91 6.93181 10.9174 7.21642 10.0601 7.81245L10.0495 7.82011L10.0495 7.82011C10.0445 7.82374 10.0396 7.82735 10.0349 7.83046C10.0141 7.85206 10 7.88567 10 7.92342C10 7.98904 10.0394 8.04212 10.0894 8.04212C10.094 8.04212 10.0985 8.04118 10.1034 8.03985C10.1055 8.03958 10.1076 8.03838 10.1095 8.03785C10.5706 7.92475 11.0513 7.89274 11.5415 7.95423C12.9173 8.12667 14.1162 8.69056 14.9573 9.95625C15.0013 10.0169 15.04 10.0132 15.0846 9.95305C16.1426 8.32593 17.7652 7.68295 19.509 7.90154C19.6063 7.91408 19.7021 7.92995 19.7976 7.94889L19.8265 7.95483C19.8559 7.96094 19.8894 7.96791 19.9115 7.97116C19.969 7.97957 20 7.91822 20 7.85233C19.9995 7.80778 19.985 7.77044 19.9523 7.74897Z" fill="#DD9426"/></svg>');
 //     }
-// }
\ No newline at end of file
+// }
+.icon-svg {
+  fill: @brand-slide;
+}
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx
index 16178c95b9..11ca0ecea3 100644
--- a/apps/presentationeditor/mobile/src/view/Toolbar.jsx
+++ b/apps/presentationeditor/mobile/src/view/Toolbar.jsx
@@ -3,6 +3,16 @@ import {NavLeft, NavRight, Link} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
 import EditorUIController from '../lib/patch'
 import { useTranslation } from 'react-i18next';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconReturnIos from '@common-ios-icons/icon-return.svg';
+import IconReturnAndroid from '@common-android-icons/icon-return.svg';
+import IconPlay from '@icons/icon-play.svg';
+import IconEditIos from '@common-ios-icons/icon-edit.svg';
+import IconEditAndroid from '@common-android-icons/icon-edit.svg';
+import IconSearch from '@common-icons/icon-search.svg';
+import IconCollaboration from '@common-icons/icon-collaboration.svg';
+import IconSettingsIos from '@common-ios-icons/icon-settings.svg?ios';
+import IconSettingsAndroid from '@common-android-icons/icon-settings.svg';
 
 const ToolbarView = props => {
     const { t } = useTranslation();
@@ -23,7 +33,12 @@ const ToolbarView = props => {
     return (
         <Fragment>
             <NavLeft>
-                {(props.isShowBack && !isVersionHistoryMode) && <Link className={`btn-doc-back${(props.disabledControls || isOpenModal) && ' disabled'}`} icon='icon-return' onClick={() => Common.Notifications.trigger('goback')}></Link>}
+                {(props.isShowBack && !isVersionHistoryMode) && <Link iconOnly className={`btn-doc-back${(props.disabledControls || isOpenModal) && ' disabled'}`} onClick={() => Common.Notifications.trigger('goback')}>
+                    {Device.ios ? 
+                        <SvgIcon slot="media" symbolId={IconReturnIos.id} className={'icon icon-svg'} /> : 
+                        <SvgIcon slot="media" symbolId={IconReturnAndroid.id} className={'icon icon-svg'} />
+                    }
+                </Link>}
                 {isVersionHistoryMode ? <a href="#" className='btn-close-history' onClick={(e) => {
                     e.preventDefault();
                     props.closeHistory();
@@ -48,10 +63,15 @@ const ToolbarView = props => {
                     onRedoClick: props.onRedo
                 })}
                 {!isVersionHistoryMode &&
-                    <Link className={(props.disabledControls || props.disabledPreview || isOpenModal) && 'disabled'} icon='icon-play' href={false} onClick={() => {props.openOptions('preview')}}></Link>
+                    <Link iconOnly className={(props.disabledControls || props.disabledPreview || isOpenModal) && 'disabled'} href={false} onClick={() => {props.openOptions('preview')}}><SvgIcon symbolId={IconPlay.id} className={'icon icon-svg'} /></Link>
                 }
                 {(props.showEditDocument && !isVersionHistoryMode) &&
-                    <Link className={(props.disabledControls || isOpenModal) ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
+                    <Link iconOnly className={(props.disabledControls || isOpenModal) ? 'disabled' : ''} href={false} onClick={props.onEditDocument}>
+                        {Device.ios ? 
+                            <SvgIcon symbolId={IconEditIos.id} className={'icon icon-svg'} /> :
+                            <SvgIcon symbolId={IconEditAndroid.id} className={'icon icon-svg'} />
+                        }
+                    </Link>
                 }
                 {(props.isEdit && EditorUIController.getToolbarOptions && !isVersionHistoryMode) && EditorUIController.getToolbarOptions({
                     disabledEdit: props.disabledEdit || props.disabledControls || isDisconnected || props.disabledPreview || isOpenModal,
@@ -59,10 +79,18 @@ const ToolbarView = props => {
                     onEditClick: () => props.openOptions('edit'),
                     onAddClick: () => props.openOptions('add')
                 })}
-                {Device.phone ? null : <Link className={(props.disabledControls || props.disabledPreview || isOpenModal) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
-                {props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches && !isVersionHistoryMode ? <Link className={(props.disabledControls || isOpenModal) && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
-                {isVersionHistoryMode ? <Link id='btn-open-history' icon='icon-version-history' href={false} className={isOpenModal && 'disabled'} onClick={() => props.openOptions('history')}></Link> : null}
-                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
+                {Device.phone ? null : <Link iconOnly className={(props.disabledControls || props.disabledPreview || isOpenModal) && 'disabled'}searchbarEnable='.searchbar' href={false}> <SvgIcon symbolId={IconSearch.id} className={'icon icon-svg'} /></Link>}
+                {props.displayCollaboration && window.matchMedia("(min-width: 375px)").matches && !isVersionHistoryMode ? <Link className={(props.disabledControls || isOpenModal) && 'disabled'} id='btn-coauth' href={false} onClick={() => props.openOptions('coauth')}><SvgIcon symbolId={IconCollaboration.id} className={'icon icon-svg'} /></Link> : null}
+                {isVersionHistoryMode ? <Link iconOnly id='btn-open-history' href={false} className={isOpenModal && 'disabled'} onClick={() => props.openOptions('history')}>
+                        {Device.ios ? 
+                            <SvgIcon symbolId={IconHistoryIos.id} className={'icon icon-svg'} /> :
+                            <SvgIcon symbolId={IconHistoryAndroid.id} className={'icon icon-svg'} />
+                        }</Link> : null}
+                <Link iconOnly className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' href={false} onClick={() => props.openOptions('settings')}>
+                    {Device.ios ? 
+                        <SvgIcon symbolId={IconSettingsIos.id} className={'icon icon-svg'} /> :
+                        <SvgIcon symbolId={IconSettingsAndroid.id} className={'icon icon-svg'} />
+                    }</Link>
             </NavRight>
         </Fragment>
     )
diff --git a/apps/presentationeditor/mobile/src/view/add/AddImage.jsx b/apps/presentationeditor/mobile/src/view/add/AddImage.jsx
index 68476a5567..08ba0f1743 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddImage.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddImage.jsx
@@ -2,6 +2,12 @@ import React, {useState} from 'react';
 import {observer, inject} from "mobx-react";
 import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
+import { Device } from '../../../../../common/mobile/utils/device';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg';
+import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg';
+import IconLinkIos from '@common-ios-icons/icon-link.svg';
+import IconLinkAndroid from '@common-android-icons/icon-link.svg';
 
 const PageLinkSettings = props => {
     const { t } = useTranslation();
@@ -37,12 +43,18 @@ const AddImage = props => {
             <Navbar title={t('View.Add.textInsertImage')} backLink={_t.textBack}></Navbar>
             <List>
                 <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onInsertByFile()}}>
-                    <Icon slot="media" icon="icon-image-library"></Icon>
+                    {Device.ios ? 
+                        <SvgIcon symbolId={IconImageLibraryIos.id} className={'icon icon-svg'} /> :
+                        <SvgIcon symbolId={IconImageLibraryAndroid.id} className={'icon icon-svg'} />
+                    }
                 </ListItem>
                 <ListItem title={_t.textPictureFromURL} link={'/add-image-from-url/'} routeProps={{
                     onInsertByUrl: props.onInsertByUrl
                 }}>
-                    <Icon slot="media" icon="icon-link"></Icon>
+                    {Device.ios ?
+                        <SvgIcon symbolId={IconLinkIos.id} className={'icon icon-svg'} /> :
+                        <SvgIcon symbolId={IconLinkAndroid.id} className={'icon icon-svg'} />
+                    }
                 </ListItem>
             </List>
         </Page>
diff --git a/apps/presentationeditor/mobile/src/view/add/AddLink.jsx b/apps/presentationeditor/mobile/src/view/add/AddLink.jsx
index 06b8642730..f3cb8bd20d 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddLink.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddLink.jsx
@@ -3,6 +3,12 @@ import {observer, inject} from "mobx-react";
 import {List, ListItem, Page, Navbar, Icon, ListInput, Segmented, Button, Link, NavLeft, NavRight, NavTitle, f7} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconClose from '@common-android-icons/icon-close.svg';
+import IconDone from '@common-android-icons/icon-done.svg';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+import IconExpandUp from '@common-android-icons/icon-expand-up.svg';
+import IconDoneDisabled from '@common-android-icons/icon-done-disabled.svg';
 
 const PageTypeLink = props => {
     const { t } = useTranslation();
@@ -71,11 +77,15 @@ const PageLinkTo = props => {
                     <div slot='after'>
                         <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {changeNumber(stateNumberTo, true);}}>
-                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                {isAndroid ?
+                                    <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                : ' - '}
                             </Button>
                             {isAndroid && <label>{stateNumberTo}</label>}
                             <Button outline className='increment item-link' onClick={() => {changeNumber(stateNumberTo, false);}}>
-                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
+                                : ' + '}
                             </Button>
                         </Segmented>
                     </div>
@@ -126,7 +136,9 @@ const PageLink = props => {
                     <Link text={Device.ios ? t('View.Add.textCancel') : ''} onClick={() => {
                         isNavigate ? f7.views.current.router.back() : props.closeModal('#add-link-popup', '#add-link-popover');
                     }}>
-                        {Device.android && <Icon icon='icon-close' />}
+                        {Device.android && 
+                            <SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
+                        }
                     </Link>
                 </NavLeft>
                 <NavTitle>{t('View.Add.textLinkSettings')}</NavTitle>
@@ -136,7 +148,11 @@ const PageLink = props => {
                             {url: link, display: stateDisplay, displayDisabled, tip: screenTip } :
                             {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled, tip: screenTip}));
                     }} text={Device.ios ? t('View.Add.textDone') : ''}>
-                        {Device.android && <Icon icon={link.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
+                        {Device.android && 
+                            link.length < 1 ? 
+                                <SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
+                        }
                     </Link>
                 </NavRight>
             </Navbar>
diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
index 3d60a6b09d..4896b738f0 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
@@ -3,6 +3,14 @@ import {observer, inject} from "mobx-react";
 import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, SkeletonBlock, Segmented, Button} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconAddTableIos from '@common-ios-icons/icon-add-table.svg';
+import IconAddTableAndroid from '@common-android-icons/icon-add-table.svg';
+import IconInsertCommentIos from '@common-ios-icons/icon-insert-comment.svg';
+import IconInsertCommentAndroid from '@common-android-icons/icon-insert-comment.svg';
+import IconImage from '@common-icons/icon-image.svg';
+import IconLinkIos from '@common-ios-icons/icon-link.svg';
+import IconLinkAndroid from '@common-android-icons/icon-link.svg';
 
 const PageTable = props => {
     const { t } = useTranslation();
@@ -52,23 +60,32 @@ const AddOther = props => {
             <ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{
                 onStyleClick: props.onStyleClick,
             }}>
-                <Icon slot="media" icon="icon-add-table"></Icon>
+                {Device.ios ? 
+                    <SvgIcon symbolId={IconAddTableIos} className={'icon icon-svg'} /> :
+                    <SvgIcon symbolId={IconAddTableAndroid} className={'icon icon-svg'} />
+                }
             </ListItem>
             {!hideAddComment && <ListItem title={_t.textComment} onClick={() => {
                 props.closeModal();
                 Common.Notifications.trigger('addcomment');
             }}>
-                <Icon slot="media" icon="icon-insert-comment"></Icon>
+                {Device.ios ? 
+                    <SvgIcon symbolId={IconInsertCommentIos} className={'icon icon-svg'} /> :
+                    <SvgIcon symbolId={IconInsertCommentAndroid} className={'icon icon-svg'} />
+                }
             </ListItem>}
             <ListItem title={_t.textImage} link='/add-image/'>
-                <Icon slot="media" icon="icon-image"></Icon>
+                <SvgIcon symbolId={IconImage} className={'icon icon-svg'} />
             </ListItem>
             {showInsertLink &&
                 <ListItem title={_t.textLink} link={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
                     onClosed: props.onCloseLinkSettings,
                     isNavigate: true
                 }}>
-                    <Icon slot="media" icon="icon-link"></Icon>
+                    {Device.ios ? 
+                        <SvgIcon symbolId={IconLinkIos} className={'icon icon-svg'} /> :
+                        <SvgIcon symbolId={IconLinkAndroid} className={'icon icon-svg'} />
+                    }
                 </ListItem>
             }
         </List>
diff --git a/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx b/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx
index 44ec47d308..3355286c5c 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx
@@ -7,6 +7,7 @@ import AddSlideController from "../../controller/add/AddSlide";
 import AddShapeController from "../../controller/add/AddShape";
 import { AddOtherController } from "../../controller/add/AddOther";
 import { MainContext } from '../../page/main';
+import SvgIcon from '@common/lib/component/SvgIcon';
 
 const AddLayoutNavbar = ({ tabs }) => {
     const isAndroid = Device.android;
@@ -17,7 +18,8 @@ const AddLayoutNavbar = ({ tabs }) => {
                 <div className='tab-buttons tabbar'>
                     {tabs.map((item, index) =>
                         <Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
-                            <Icon slot="media" icon={item.icon}></Icon>
+                            {/* <Icon slot="media" icon={item.icon}></Icon> */}
+                            <SvgIcon symbolId={item.icon} className={'icon icon-svg'} />
                         </Link>)}
                     {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
                 </div> :
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
index 71fd049253..63c2f75b97 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
@@ -6,6 +6,21 @@ import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
 import { f7 } from 'framework7-react';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+import IconMoveForeground from '@common-icons/icon-move-foreground.svg';
+import IconMoveBackground from '@common-icons/icon-move-background.svg';
+import IconMoveForward from '@common-icons/icon-move-forward.svg';
+import IconMoveBackward from '@common-icons/icon-move-backward.svg';
+import IconAlignLeft from '@icons/icon-align-left.svg';
+import IconAlignCenter from '@icons/icon-align-center.svg';
+import IconAlignRight from '@icons/icon-align-right.svg';
+import IconAlignTop from '@icons/icon-align-top.svg';
+import IconAlignMiddle from '@icons/icon-align-middle.svg';
+import IconAlignBottom from '@icons/icon-align-bottom.svg';
+import IconAlignHorizontal from '@icons/icon-align-horizontal.svg';
+import IconAlignVertical from '@icons/icon-align-vertical.svg';
 
 const PageCustomFillColor = props => {
     const { t } = useTranslation();
@@ -29,7 +44,10 @@ const PageCustomFillColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -97,7 +115,10 @@ const PageCustomBorderColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -135,7 +156,10 @@ const PageBorderColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -319,7 +343,10 @@ const PageDesign = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -355,23 +382,22 @@ const PageReorder = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
-                <ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                <ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'><SvgIcon symbolId={IconMoveForeground.id} className={'icon icon-svg'} /> 
                 </ListItem>
-                <ListItem title={_t.textSendToBackground} onClick={() => {props.onReorder('all-down')}} link='#' className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-background"></Icon>
+                <ListItem title={_t.textSendToBackground} onClick={() => {props.onReorder('all-down')}} link='#' className='no-indicator'><SvgIcon symbolId={IconMoveBackground.id} className={'icon icon-svg'} />
                 </ListItem>
-                <ListItem title={_t.textMoveForward} onClick={() => {props.onReorder('move-up')}} link='#' className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                <ListItem title={_t.textMoveForward} onClick={() => {props.onReorder('move-up')}} link='#' className='no-indicator'><SvgIcon symbolId={IconMoveForward.id} className={'icon icon-svg'} />
                 </ListItem>
-                <ListItem title={_t.textMoveBackward} onClick={() => {props.onReorder('move-down')}} link='#' className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                <ListItem title={_t.textMoveBackward} onClick={() => {props.onReorder('move-down')}} link='#' className='no-indicator'><SvgIcon symbolId={IconMoveBackward.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
@@ -394,37 +420,32 @@ const PageAlign = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
-                <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-left"></Icon>
+                <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'><SvgIcon symbolId={IconAlignLeft.id} className={'icon icon-svg'} />
                 </ListItem>
-                <ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-center"></Icon>
+                <ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'><SvgIcon symbolId={IconAlignCenter.id} className={'icon icon-svg'} />
                 </ListItem>
-                <ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-right"></Icon>
+                <ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'><SvgIcon symbolId={IconAlignRight.id} className={'icon icon-svg'} />
                 </ListItem>
-                <ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-top"></Icon>
+                <ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'><SvgIcon symbolId={IconAlignTop.id} className={'icon icon-svg'} />
                 </ListItem>
-                <ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-middle"></Icon>
+                <ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'><SvgIcon symbolId={IconAlignMiddle.id} className={'icon icon-svg'} />
                 </ListItem>
-                <ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-bottom"></Icon>
+                <ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'><SvgIcon symbolId={IconAlignBottom.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
             <List>
-                <ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-horizontal"></Icon>
+                <ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'><SvgIcon symbolId={IconAlignHorizontal.id} className={'icon icon-svg'} /> 
                 </ListItem>
-                <ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-vertical"></Icon>
+                <ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'><SvgIcon symbolId={IconAlignVertical.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditImage.jsx b/apps/presentationeditor/mobile/src/view/edit/EditImage.jsx
index 76806b686d..693a825e3d 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditImage.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditImage.jsx
@@ -4,6 +4,25 @@ import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, V
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+import IconMoveForeground from '@common-icons/icon-move-foreground.svg';
+import IconMoveBackground from '@common-icons/icon-move-background.svg';
+import IconMoveForward from '@common-icons/icon-move-forward.svg';
+import IconMoveBackward from '@common-icons/icon-move-backward.svg';
+import IconAlignLeft from '@icons/icon-align-left.svg';
+import IconAlignCenter from '@icons/icon-align-center.svg';
+import IconAlignRight from '@icons/icon-align-right.svg';
+import IconAlignTop from '@icons/icon-align-top.svg';
+import IconAlignMiddle from '@icons/icon-align-middle.svg';
+import IconAlignBottom from '@icons/icon-align-bottom.svg';
+import IconAlignHorizontal from '@icons/icon-align-horizontal.svg';
+import IconAlignVertical from '@icons/icon-align-vertical.svg';
+import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg';
+import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg';
+import IconLinkIos from '@common-ios-icons/icon-link.svg';
+import IconLinkAndroid from '@common-android-icons/icon-link.svg';
 
 const EditImage = props => {
     const { t } = useTranslation();
@@ -50,23 +69,26 @@ const PageReorder = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
                 <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                    <SvgIcon symbolId={IconMoveForeground.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-background"></Icon>
+                    <SvgIcon symbolId={IconMoveBackground.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                    <SvgIcon symbolId={IconMoveForward.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                     <SvgIcon symbolId={IconMoveBackward.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
@@ -89,37 +111,40 @@ const PageAlign = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
                 <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-left"></Icon>
+                    <SvgIcon symbolId={IconAlignLeft.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-center"></Icon>
+                    <SvgIcon symbolId={IconAlignCenter.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-right"></Icon>
+                    <SvgIcon symbolId={IconAlignRight.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-top"></Icon>
+                     <SvgIcon symbolId={IconAlignTop.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-middle"></Icon>
+                    <SvgIcon symbolId={IconAlignMiddle.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-bottom"></Icon>
+                     <SvgIcon symbolId={IconAlignBottom.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
             <List>
                 <ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-horizontal"></Icon>
+                    <SvgIcon symbolId={IconAlignHorizontal.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-vertical"></Icon>
+                    <SvgIcon symbolId={IconAlignVertical.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
@@ -142,19 +167,28 @@ const PageReplace = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
                 <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
-                    <Icon slot="media" icon="icon-image-library"></Icon>
+                    {Device.ios ? 
+                        <SvgIcon symbolId={IconImageLibraryIos.id} className={'icon icon-svg'} /> :
+                        <SvgIcon symbolId={IconImageLibraryAndroid.id} className={'icon icon-svg'} />
+                    }
                 </ListItem>
                 <ListItem title={_t.textPictureFromURL} link='/edit-image-link/' routeProps={{
                     onReplaceByUrl: props.onReplaceByUrl
                 }}>
-                    <Icon slot="media" icon="icon-link"></Icon>
+                    {Device.ios ?
+                        <SvgIcon symbolId={IconLinkIos.id} className={'icon icon-svg'} /> :
+                        <SvgIcon symbolId={IconLinkAndroid.id} className={'icon icon-svg'} />
+                    }
                 </ListItem>
             </List>
         </Page>
@@ -184,7 +218,10 @@ const PageLinkSettings = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
index f2c9ef293d..70f750ffed 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
@@ -3,6 +3,11 @@ import {observer, inject} from "mobx-react";
 import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, NavRight, Link, NavLeft, NavTitle} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconClose from '@common-android-icons/icon-close.svg';
+import IconDone from '@common-android-icons/icon-done.svg';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+import IconExpandUp from '@common-android-icons/icon-expand-up.svg';
 
 const PageEditTypeLink = props => {
     const { t } = useTranslation();
@@ -82,11 +87,15 @@ const PageEditLinkTo = props => {
                     <div slot='after'>
                         <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {changeNumber(stateNumberTo, true);}}>
-                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                : ' - '}
                             </Button>
                             {isAndroid && <label>{stateNumberTo}</label>}
                             <Button outline className='increment item-link' onClick={() => {changeNumber(stateNumberTo, false);}}>
-                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
+                                : ' + '}
                             </Button>
                         </Segmented>
                     </div>
@@ -148,7 +157,9 @@ const PageLink = props => {
                     <Link text={Device.ios ? t('View.Edit.textCancel') : ''} onClick={() => {
                         props.isNavigate ? f7.views.current.router.back() : props.closeModal();
                     }}>
-                        {Device.android && <Icon icon='icon-close' />}
+                        {Device.android && 
+                            <SvgIcon symbolId={IconClose.id} className={'icon icon-svg'} />
+                        }
                     </Link>
                 </NavLeft>
                 <NavTitle>{t('View.Edit.textLinkSettings')}</NavTitle>
@@ -158,7 +169,11 @@ const PageLink = props => {
                             {url: link, display: stateDisplay, tip: screenTip, displayDisabled } :
                             {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled}));
                     }} text={Device.ios ? t('View.Edit.textDone') : ''}>
-                        {Device.android && <Icon icon={link.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
+                        {Device.android && 
+                            link.length < 1 ?
+                                <SvgIcon symbolId={IconDoneDisabled.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconDone.id} className={'icon icon-svg'} />
+                        }
                     </Link>
                 </NavRight>
             </Navbar>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
index 72dccc9d25..115342be71 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
@@ -4,6 +4,21 @@ import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, V
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+import IconMoveForeground from '@common-icons/icon-move-foreground.svg';
+import IconMoveBackground from '@common-icons/icon-move-background.svg';
+import IconMoveForward from '@common-icons/icon-move-forward.svg';
+import IconMoveBackward from '@common-icons/icon-move-backward.svg';
+import IconAlignLeft from '@icons/icon-align-left.svg';
+import IconAlignCenter from '@icons/icon-align-center.svg';
+import IconAlignRight from '@icons/icon-align-right.svg';
+import IconAlignTop from '@icons/icon-align-top.svg';
+import IconAlignMiddle from '@icons/icon-align-middle.svg';
+import IconAlignBottom from '@icons/icon-align-bottom.svg';
+import IconAlignHorizontal from '@icons/icon-align-horizontal.svg';
+import IconAlignVertical from '@icons/icon-align-vertical.svg';
 
 const EditShape = props => {
     const { t } = useTranslation();
@@ -147,7 +162,10 @@ const PageStyle = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -223,7 +241,10 @@ const PageCustomFillColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -271,7 +292,10 @@ const PageStyleNoFill = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -322,7 +346,10 @@ const PageReplace = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -362,23 +389,26 @@ const PageReorder = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
                 <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                    <SvgIcon symbolId={IconMoveForeground.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-background"></Icon>
+                    <SvgIcon symbolId={IconMoveBackground.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                    <SvgIcon symbolId={IconMoveForward.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                     <SvgIcon symbolId={IconMoveBackward.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
@@ -401,37 +431,40 @@ const PageAlign = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
                 <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-left"></Icon>
+                    <SvgIcon symbolId={IconAlignLeft.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-center"></Icon>
+                    <SvgIcon symbolId={IconAlignCenter.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-right"></Icon>
+                    <SvgIcon symbolId={IconAlignRight.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-top"></Icon>
+                    <SvgIcon symbolId={IconAlignTop.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-middle"></Icon>
+                     <SvgIcon symbolId={IconAlignMiddle.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-bottom"></Icon>
+                    <SvgIcon symbolId={IconAlignBottom.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
             <List>
                 <ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-horizontal"></Icon>
+                    <SvgIcon symbolId={IconAlignHorizontal.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-vertical"></Icon>
+                     <SvgIcon symbolId={IconAlignVertical.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
@@ -465,7 +498,10 @@ const PageBorderColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -499,7 +535,10 @@ const PageCustomBorderColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
index 2100bad663..7840d845c8 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
@@ -4,6 +4,10 @@ import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, V
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+import IconExpandUp from '@common-android-icons/icon-expand-up.svg';
 
 const EditSlide = props => {
     const { t } = useTranslation();
@@ -52,7 +56,10 @@ const PageTheme = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -91,7 +98,10 @@ const PageLayout = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -239,7 +249,10 @@ const PageTransition = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -271,7 +284,9 @@ const PageTransition = props => {
                                 duration = Math.max(0, --duration);
                                 props.changeDuration(duration);
                             }}>
-                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                : ' - '}
                             </Button>
                             {isAndroid && <label>{(_effectDuration !== null && _effectDuration !== undefined) ?  (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>}
                             <Button outline className='increment item-link' onClick={() => {
@@ -279,7 +294,9 @@ const PageTransition = props => {
                                 duration = Math.min(300, ++duration);
                                 props.changeDuration(duration);
                             }}>
-                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
+                                : ' + '}
                             </Button>
                         </Segmented>
                     </div>
@@ -328,7 +345,10 @@ const PageEffect = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -363,7 +383,10 @@ const PageType= props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -418,7 +441,10 @@ const PageFillColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -456,7 +482,10 @@ const PageCustomFillColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
index bc70667302..3e1abe365c 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
@@ -4,7 +4,37 @@ import {f7, Page, Navbar, List, ListItem, ListButton, BlockTitle,SkeletonBlock,
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
-
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+import IconTableBordersAll from '@common-icons/icon-table-borders-all.svg';
+import IconTableBordersNone from '@common-icons/icon-table-borders-none.svg';
+import IconTableBordersInner from '@common-icons/icon-table-borders-inner.svg';
+import IconTableBordersOuter from '@common-icons/icon-table-borders-outer.svg';
+import IconTableBordersTop from '@common-icons/icon-table-borders-top.svg';
+import IconTableBordersBottom from '@common-icons/icon-table-borders-bottom.svg';
+import IconTableBordersLeft from '@common-icons/icon-table-borders-left.svg';
+import IconTableBordersRight from '@common-icons/icon-table-borders-right.svg';
+import IconTableBordersCenter from '@common-icons/icon-table-borders-center.svg';
+import IconTableBordersMiddle from '@common-icons/icon-table-borders-middle.svg';
+import IconMoveForeground from '@common-icons/icon-move-foreground.svg';
+import IconMoveBackground from '@common-icons/icon-move-background.svg';
+import IconMoveForward from '@common-icons/icon-move-forward.svg';
+import IconMoveBackward from '@common-icons/icon-move-backward.svg';
+import IconAlignLeft from '@icons/icon-align-left.svg';
+import IconAlignCenter from '@icons/icon-align-center.svg';
+import IconAlignRight from '@icons/icon-align-right.svg';
+import IconAlignTop from '@icons/icon-align-top.svg';
+import IconAlignMiddle from '@icons/icon-align-middle.svg';
+import IconAlignBottom from '@icons/icon-align-bottom.svg';
+import IconAlignHorizontal from '@icons/icon-align-horizontal.svg';
+import IconAlignVertical from '@icons/icon-align-vertical.svg';
+import IconTableAddColumnLeft from '@common-icons/icon-table-add-column-left.svg';
+import IconTableAddColumnRight from '@common-icons/icon-table-add-column-right.svg';
+import IconTableAddRowAbove from '@common-icons/icon-table-add-row-above.svg';
+import IconTableAddRowBelow from '@common-icons/icon-table-add-row-below.svg';
+import IconTableRemoveColumn from '@common-icons/icon-table-remove-column.svg';
+import IconTableRemoveRow from '@common-icons/icon-table-remove-row.svg';
 // Style
 
 const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,storeFocusObjects,onGetTableStylesPreviews}) => {
@@ -73,7 +103,10 @@ const PageStyleOptions = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -126,7 +159,10 @@ const PageCustomFillColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -190,7 +226,10 @@ const PageCustomBorderColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -227,7 +266,10 @@ const PageBorderColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -294,38 +336,38 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
             <ListItem className='buttons table-presets'>
                 <div className="row">
                     <a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
-                        <Icon slot="media" icon="icon-table-borders-all"></Icon>
+                        <SvgIcon symbolId={IconTableBordersAll.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("")}}>
-                        <Icon slot="media" icon="icon-table-borders-none"></Icon>
+                        <SvgIcon symbolId={IconTableBordersNone.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("cm")}}>
-                        <Icon slot="media" icon="icon-table-borders-inner"></Icon>
+                         <SvgIcon symbolId={IconTableBordersInner.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("lrtb")}}>
-                        <Icon slot="media" icon="icon-table-borders-outer"></Icon>
+                        <SvgIcon symbolId={IconTableBordersOuter.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("l")}}>
-                        <Icon slot="media" icon="icon icon-table-borders-left"></Icon>
+                        <SvgIcon symbolId={IconTableBordersLeft.id} className={'icon icon-svg'} />
                     </a>
                 </div>
             </ListItem>
             <ListItem className='buttons table-presets'>
                 <div className="row">
                     <a className={'item-link button'} onClick={() => {onBorderType("c")}}>
-                        <Icon slot="media" icon="icon-table-borders-center"></Icon>
+                        <SvgIcon symbolId={IconTableBordersCenter.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("r")}}>
-                        <Icon slot="media" icon="icon-table-borders-right"></Icon>
+                         <SvgIcon symbolId={IconTableBordersRight.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("t")}}>
-                        <Icon slot="media" icon="icon-table-borders-top"></Icon>
+                        <SvgIcon symbolId={IconTableBordersTop.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("m")}}>
-                        <Icon slot="media" icon="icon-table-borders-middle"></Icon>
+                        <SvgIcon symbolId={IconTableBordersMiddle.id} className={'icon icon-svg'} />
                     </a>
                     <a className={'item-link button'} onClick={() => {onBorderType("b")}}>
-                        <Icon slot="media" icon="icon-table-borders-bottom"></Icon>
+                        <SvgIcon symbolId={IconTableBordersBottom.id} className={'icon icon-svg'} />
                     </a>
                 </div>
             </ListItem>
@@ -352,7 +394,10 @@ const PageStyle = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -398,23 +443,26 @@ const PageReorder = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
                 <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                    <SvgIcon symbolId={IconMoveForeground.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-background"></Icon>
+                    <SvgIcon symbolId={IconMoveBackground.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                    <SvgIcon symbolId={IconMoveForward.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                    <SvgIcon symbolId={IconMoveBackward.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
@@ -437,37 +485,40 @@ const PageAlign = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ?
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
             </Navbar>
             <List>
                 <ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-left"></Icon>
+                     <SvgIcon symbolId={IconAlignLeft.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-center"></Icon>
+                    <SvgIcon symbolId={IconAlignCenter.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-right"></Icon>
+                    <SvgIcon symbolId={IconAlignRight.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-top"></Icon>
+                    <SvgIcon symbolId={IconAlignTop.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-middle"></Icon>
+                    <SvgIcon symbolId={IconAlignMiddle.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-bottom"></Icon>
+                    <SvgIcon symbolId={IconAlignBottom.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
             <List>
                 <ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-horizontal"></Icon>
+                    <SvgIcon symbolId={IconAlignHorizontal.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'>
-                    <Icon slot="media" icon="icon-align-vertical"></Icon>
+                    <SvgIcon symbolId={IconAlignVertical.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
@@ -490,26 +541,26 @@ const EditTable = props => {
                 <ListItem className='buttons'>
                     <div className="row">
                         <a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
-                            <Icon slot="media" icon="icon-table-add-column-left"></Icon>
+                            <SvgIcon symbolId={IconTableAddColumnLeft.id} className={'icon icon-svg'} />
                         </a>
                         <a className={'item-link button'} onClick={() => {props.onAddColumnRight()}}>
-                            <Icon slot="media" icon="icon-table-add-column-right"></Icon>
+                            <SvgIcon symbolId={IconTableAddColumnRight.id} className={'icon icon-svg'} />
                         </a>
                         <a className={'item-link button'} onClick={() => {props.onAddRowAbove()}}>
-                            <Icon slot="media" icon="icon-table-add-row-above"></Icon>
+                            <SvgIcon symbolId={IconTableAddRowAbove.id} className={'icon icon-svg'} />
                         </a>
                         <a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
-                            <Icon slot="media" icon="icon-table-add-row-below"></Icon>
+                            <SvgIcon symbolId={IconTableAddRowBelow.id} className={'icon icon-svg'} />
                         </a>
                     </div>
                 </ListItem>
                 <ListItem className='buttons'>
                     <div className="row">
                         <a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
-                            <Icon slot="media" icon="icon-table-remove-column"></Icon>
+                            <SvgIcon symbolId={IconTableRemoveColumn.id} className={'icon icon-svg'} />
                         </a>
                         <a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
-                            <Icon slot="media" icon="icon icon-table-remove-row"></Icon>
+                            <SvgIcon symbolId={IconTableRemoveRow.id} className={'icon icon-svg'} />
                         </a>
                     </div>
                 </ListItem>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index dbaf2f1f5f..13573ec17e 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -7,6 +7,30 @@ import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobi
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
 import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconTextAdditional from '@common-icons/icon-text-additional.svg';
+import IconTextAlignLeft from '@common-icons/icon-text-align-left.svg';
+import IconTextAlignCenter from '@common-icons/icon-text-align-center.svg';
+import IconTextAlignRight from '@common-icons/icon-text-align-right.svg';
+import IconTextAlignJust from '@common-icons/icon-text-align-just.svg';
+import IconTextValignBottom from '@common-icons/icon-text-valign-bottom.svg';
+import IconTextValignMiddle from '@common-icons/icon-text-valign-middle.svg';
+import IconTextValignTop from '@common-icons/icon-text-valign-top.svg';
+import IconDeIndent from '@common-icons/icon-de-indent.svg';
+import IconInIndent from '@common-icons/icon-in-indent.svg';
+import IconTextOrientationAnglecount from '@common-icons/icon-text-orientation-anglecount.svg';
+import IconTextOrientationHorizontal from '@common-icons/icon-text-orientation-horizontal.svg';
+import IconTextOrientationRotateup from '@common-icons/icon-text-orientation-rotateup.svg';
+import IconTextOrientationRotatedown from '@common-icons/icon-text-orientation-rotatedown.svg';
+import IconExpandUp from '@common-android-icons/icon-expand-up.svg';
+import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg';
+import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg';
+import IconLinkIos from '@common-ios-icons/icon-link.svg';
+import IconLinkAndroid from '@common-android-icons/icon-link.svg';
+import IconTextColor from '@common-icons/icon-text-color.svg';
+import IconTextSelection from '@common-icons/icon-text-selection.svg';
+import IconBullets from '@common-icons/icon-bullets.svg';
+import IconLineSpacing from '@common-icons/icon-linespacing.svg';
 
 const EditText = props => {
     const isAndroid = Device.android;
@@ -80,7 +104,7 @@ const EditText = props => {
                     onTextColor: props.onTextColor
                 }}>
                     {!isAndroid ?
-                        <Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
+                        <SvgIcon symbolId={IconTextColor.id} className='icon icon-svg'></SvgIcon> :
                         fontColorPreview
                     }
                 </ListItem>
@@ -88,7 +112,7 @@ const EditText = props => {
                     onHighlightColor: props.onHighlightColor
                 }}>
                     {!isAndroid ?
-                        <Icon slot="media" icon="icon-text-selection">{highlightColorPreview}</Icon> : highlightColorPreview
+                        <SvgIcon symbolId={IconTextSelection.id} className='icon icon-svg' /> : highlightColorPreview
                     }
                 </ListItem>
                 <ListItem title={_t.textAdditionalFormatting} link="/edit-text-add-formatting/" routeProps={{
@@ -97,7 +121,9 @@ const EditText = props => {
                     onAdditionalScript: props.onAdditionalScript,
                     changeLetterSpacing: props.changeLetterSpacing
                 }}>
-                    {!isAndroid && <Icon slot="media" icon="icon-text-additional"></Icon>}
+                    {!isAndroid && 
+                        <SvgIcon symbolId={IconTextAdditional.id} className='icon icon-svg' />
+                    }
                 </ListItem>
             </List>
             {paragraphObj || storeFocusObjects.settings.includes('text') ? (
@@ -106,39 +132,39 @@ const EditText = props => {
                         <ListItem className='buttons'>
                             <div className="row">
                                 <a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
-                                    <Icon slot="media" icon="icon-text-align-left"></Icon>
+                                    <SvgIcon symbolId={IconTextAlignLeft.id} className='icon icon-svg' />
                                 </a>
                                 <a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
-                                    <Icon slot="media" icon="icon-text-align-center"></Icon>
+                                    <SvgIcon symbolId={IconTextAlignCenter.id} className='icon icon-svg' />
                                 </a>
                                 <a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
-                                    <Icon slot="media" icon="icon-text-align-right"></Icon>
+                                    <SvgIcon symbolId={IconTextAlignRight.id} className='icon icon-svg' />
                                 </a>
                                 <a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
-                                    <Icon slot="media" icon="icon-text-align-just"></Icon>
+                                    <SvgIcon symbolId={IconTextAlignJust.id} className='icon icon-svg' />
                                 </a>
                             </div>
                         </ListItem>
                         <ListItem className='buttons'>
                             <div className="row">
                                 <a className={'button' + (paragraphValign === 'top' ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
-                                    <Icon slot="media" icon="icon-text-valign-top"></Icon>
+                                    <SvgIcon symbolId={IconTextValignTop.id} className='icon icon-svg' />
                                 </a>
                                 <a className={'button' + (paragraphValign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphValign('center')}}>
-                                    <Icon slot="media" icon="icon-text-valign-middle"></Icon>
+                                    <SvgIcon symbolId={IconTextValignMiddle.id} className='icon icon-svg' />
                                 </a>
                                 <a className={'button' + (paragraphValign === 'bottom' ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
-                                    <Icon slot="media" icon="icon-text-valign-bottom"></Icon>
+                                    <SvgIcon symbolId={IconTextValignBottom.id} className='icon icon-svg' />
                                 </a>
                             </div>
                         </ListItem>
                         <ListItem className='buttons'>
                             <div className="row">
                                 <a className={'button item-link' + (!canDecreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('left')}}>
-                                    <Icon slot="media" icon="icon-de-indent"></Icon>
+                                   <SvgIcon symbolId={IconDeIndent.id} className='icon icon-svg' />
                                 </a>
                                 <a className={'button item-link' + (!canIncreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('right')}}>
-                                    <Icon slot="media" icon="icon-in-indent"></Icon>
+                                    <SvgIcon symbolId={IconInIndent.id} className='icon icon-svg' />
                                 </a>
                             </div>
                         </ListItem>
@@ -147,7 +173,9 @@ const EditText = props => {
                                 setOrientationTextShape: props.setOrientationTextShape,
                                 shapeObject
                             }}>
-                                {!isAndroid && <Icon slot="media" icon="icon-text-orientation-anglecount"></Icon>}
+                                {!isAndroid && 
+                                    <SvgIcon symbolId={IconTextOrientationAnglecount.id} className='icon icon-svg' />
+                                }
                             </ListItem>
                         }
                         <ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
@@ -159,12 +187,16 @@ const EditText = props => {
                             
                         }}>
                             <div className="preview">{previewList}</div>
-                            {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
+                            {!isAndroid && 
+                                <SvgIcon symbolId={IconBullets.id} className='icon icon-svg' />
+                            }
                         </ListItem>
                         <ListItem title={_t.textLineSpacing} link='/edit-text-line-spacing/' routeProps={{
                             onLineSpacing: props.onLineSpacing
                         }}>
-                            {!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
+                            {!isAndroid && 
+                                <SvgIcon symbolId={IconLineSpacing.id} className='icon icon-svg' />
+                            }
                         </ListItem>
                     </List>
                     <BlockTitle>{_t.textDistanceFromText}</BlockTitle>
@@ -174,11 +206,15 @@ const EditText = props => {
                             <div slot='after'>
                                 <Segmented>
                                     <Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
-                                        {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                        {isAndroid ? 
+                                            <SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
+                                        : ' - '}
                                     </Button>
                                     {isAndroid && <label>{displayBefore}</label>}
                                     <Button outline className='increment item-link' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}>
-                                        {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                        {isAndroid ?
+                                            <SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
+                                        : ' + '}
                                     </Button>
                                 </Segmented>
                             </div>
@@ -188,11 +224,15 @@ const EditText = props => {
                             <div slot='after'>
                                 <Segmented>
                                     <Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
-                                        {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                        {isAndroid ? 
+                                            <SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
+                                        : ' - '}
                                     </Button>
                                     {isAndroid && <label>{displayAfter}</label>}
                                     <Button outline className='increment item-link' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}>
-                                        {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                        {isAndroid ?
+                                            <SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
+                                        : ' + '}
                                     </Button>
                                 </Segmented>
                             </div>
@@ -216,7 +256,10 @@ const PageOrientationTextShape = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -229,7 +272,7 @@ const PageOrientationTextShape = props => {
                         setDirectionTextShape(Asc.c_oAscVertDrawingText.normal);
                         props.setOrientationTextShape(Asc.c_oAscVertDrawingText.normal);
                 }}>
-                    <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon>
+                    <SvgIcon symbolId={IconTextOrientationHorizontal.id} className='icon icon-svg' />
                 </ListItem>
                 <ListItem title={t('View.Edit.textRotateTextDown')} radio
                     checked={directionTextShape === Asc.c_oAscVertDrawingText.vert}
@@ -238,7 +281,7 @@ const PageOrientationTextShape = props => {
                         setDirectionTextShape(Asc.c_oAscVertDrawingText.vert);
                         props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert);
                 }}>
-                    <Icon slot="media" icon="icon-text-orientation-rotatedown"></Icon>
+                    <SvgIcon symbolId={IconTextOrientationRotatedown.id} className='icon icon-svg' />
                 </ListItem>
                 <ListItem title={t('View.Edit.textRotateTextUp')} radio
                     checked={directionTextShape === Asc.c_oAscVertDrawingText.vert270}
@@ -247,7 +290,7 @@ const PageOrientationTextShape = props => {
                         setDirectionTextShape(Asc.c_oAscVertDrawingText.vert270);
                         props.setOrientationTextShape(Asc.c_oAscVertDrawingText.vert270);
                 }}>
-                    <Icon slot="media" icon="icon-text-orientation-rotateup"></Icon>
+                    <SvgIcon symbolId={IconTextOrientationRotateup.id} className='icon icon-svg' />
                 </ListItem>
             </List>
         </Page>
@@ -323,7 +366,10 @@ const PageFonts = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -334,11 +380,15 @@ const PageFonts = props => {
                     <div slot='after'>
                         <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
-                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
+                                : ' - '}
                             </Button>
                             {isAndroid && <label>{displaySize}</label>}
                             <Button outline className='increment item-link' onClick={() => {props.changeFontSize(size, false)}}>
-                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
+                                : ' + '}
                             </Button>
                         </Segmented>
                     </div>
@@ -412,7 +462,10 @@ const PageFontColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -450,7 +503,10 @@ const PageCustomFontColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -481,7 +537,10 @@ const PageHighlightColor = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -527,7 +586,10 @@ const PageAdditionalFormatting = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -546,11 +608,15 @@ const PageAdditionalFormatting = props => {
                     <div slot='after'>
                         <Segmented>
                             <Button outline className='decrement item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}>
-                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandDownAndroid.id} className='icon icon-svg' />
+                                : ' - '}
                             </Button>
                             {isAndroid && <label>{(Number.isInteger(letterSpacing) ? letterSpacing : letterSpacing.toFixed(2)) + ' ' + Common.Utils.Metric.getCurrentMetricName()}</label>}
                             <Button outline className='increment item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}>
-                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                {isAndroid ? 
+                                    <SvgIcon symbolId={IconExpandUp.id} className='icon icon-svg' />
+                                : ' + '}
                             </Button>
                         </Segmented>
                     </div>
@@ -597,12 +663,18 @@ const PageAddImage = (props) => {
     return (
         <List className='bullet-menu-image'>
             <ListItem title={_t.textPictureFromLibrary} onClick={props.onImageSelect}>
-                <Icon slot="media" icon="icon-image-library" />
+                {Device.ios ? 
+                    <SvgIcon symbolId={IconImageLibraryIos.id} className='icon icon-svg' /> :
+                    <SvgIcon symbolId={IconImageLibraryAndroid.id} className='icon icon-svg' />
+                }
             </ListItem>
             <ListItem title={_t.textPictureFromURL} link="#" onClick={() =>  
                 props.f7router.navigate('/edit-bullets-and-numbers/image-link/',
                 {props: {onInsertByUrl: props.onInsertByUrl}}) }>
-                <Icon slot="media" icon="icon-link" />
+                {Device.ios ? 
+                    <SvgIcon symbolId={IconLinkIos.id} className='icon icon-svg' /> :
+                    <SvgIcon symbolId={IconLinkAndroid.id} className='icon icon-svg' />
+                }
             </ListItem>
         </List>
     )
@@ -718,7 +790,10 @@ const PageBulletsAndNumbers = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
@@ -777,7 +852,10 @@ const PageLineSpacing = props => {
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
+                            {Device.ios ? 
+                                <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            }
                         </Link>
                     </NavRight>
                 }
diff --git a/apps/presentationeditor/mobile/src/view/settings/Download.jsx b/apps/presentationeditor/mobile/src/view/settings/Download.jsx
index d285d819ef..4dee6a7e6f 100644
--- a/apps/presentationeditor/mobile/src/view/settings/Download.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/Download.jsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { Page, Navbar, List, ListItem, BlockTitle, Icon } from "framework7-react";
 import { useTranslation } from "react-i18next";
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconFormatPptx from '@icons/formats/icon-format-pptx.svg';
+import IconFormatPdf from '@common-icons/formats/pdf.svg'; 
+import IconFormatPdfa from '@common-icons/formats/pdfa.svg';
+import IconFormatOdp from '@icons/formats/icon-format-odp.svg';
+import IconFormatPotx from '@icons/formats/icon-format-potx.svg';
+import IconFormatOtp from '@icons/formats/icon-format-otp.svg';
 
 const Download = props => {
     const { t } = useTranslation();
@@ -12,22 +19,22 @@ const Download = props => {
             <BlockTitle>{_t.textDownloadAs}</BlockTitle>
             <List>
                 <ListItem title="PPTX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PPTX)}>
-                    <Icon slot="media" icon="icon-format-pptx"></Icon>
+                      <SvgIcon symbolId={IconFormatPptx.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title="PDF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDF)}>
-                    <Icon slot="media" icon="icon-format-pdf"></Icon>
+                     <SvgIcon symbolId={IconFormatPdf.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title="PDF/A" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDFA)}>
-                    <Icon slot="media" icon="icon-format-pdfa"></Icon>
+                     <SvgIcon symbolId={IconFormatPdfa.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title="ODP" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.ODP)}>
-                    <Icon slot="media" icon="icon-format-odp"></Icon>
+                     <SvgIcon symbolId={IconFormatOdp.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title="POTX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.POTX)}>
-                    <Icon slot="media" icon="icon-format-potx"></Icon>
+                     <SvgIcon symbolId={IconFormatPotx.id} className={'icon icon-svg'} />
                 </ListItem>
                 <ListItem title="OTP" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.OTP)}>
-                    <Icon slot="media" icon="icon-format-otp"></Icon>
+                    <SvgIcon symbolId={IconFormatOtp.id} className={'icon icon-svg'} />
                 </ListItem>
             </List>
         </Page>
diff --git a/apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx b/apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx
index a5d473faf5..045a60b694 100644
--- a/apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx
@@ -5,6 +5,19 @@ import { Device } from '../../../../../common/mobile/utils/device';
 import { observer, inject } from "mobx-react";
 import { MainContext } from '../../page/main';
 import { SettingsContext } from '../../controller/settings/Settings';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconSearch from '@common-icons/icon-search.svg';
+import IconCollaboration from '@common-icons/icon-collaboration.svg';
+import IconSetup from '@icons/icon-setup.svg';
+import IconAppSettings from '@common-icons/icon-app-settings.svg';
+import IconVersionHistory from '@common-icons/icon-version-history.svg';
+import IconDownload from '@common-icons/icon-download.svg';
+import IconPrint from '@common-icons/icon-print.svg';
+import IconInfo from '@common-icons/icon-info.svg';
+import IconHelp from '@common-icons/icon-help.svg';
+import IconAbout from '@common-icons/icon-about.svg';
+import IconFeedbackIos from '@common-ios-icons/icon-feedback.svg';
+import IconFeedbackAndroid from '@common-android-icons/icon-feedback.svg';
 
 const SettingsPage = inject('storeAppOptions', 'storeToolbarSettings', 'storePresentationInfo')(observer(props => {
     const { t } = useTranslation();
@@ -66,21 +79,21 @@ const SettingsPage = inject('storeAppOptions', 'storeToolbarSettings', 'storePre
             <List>
                 {!props.inPopover &&
                     <ListItem disabled={appOptions.readerMode || disabledPreview ? true : false} title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={settingsContext.closeModal} className='no-indicator'>
-                        <Icon slot="media" icon="icon-search"></Icon>
+                        <SvgIcon slot="media" symbolId={IconSearch.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {window.matchMedia("(max-width: 374px)").matches ?
                     <ListItem title={_t.textCollaboration} link="#" onClick={() => onOpenOptions('coauth')} className='no-indicator'>
-                        <Icon slot="media" icon="icon-collaboration"></Icon>
+                        <SvgIcon slot="media" symbolId={IconCollaboration.id} className={'icon icon-svg'} />
                     </ListItem> 
                 : null}
                 {_isEdit && 
                     <ListItem link="/presentation-settings/" title={_t.textPresentationSettings}>
-                        <Icon slot="media" icon="icon-setup"></Icon>
+                        <SvgIcon slot="media" symbolId={IconSetup.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 <ListItem title={_t.textApplicationSettings} link="/application-settings/">
-                    <Icon slot="media" icon="icon-app-settings"></Icon>
+                    <SvgIcon slot="media" symbolId={IconAppSettings.id} className={'icon icon-svg'} />
                 </ListItem>
                 {_isEdit && canUseHistory && 
                     <ListItem title={t('View.Settings.textVersionHistory')} link={!Device.phone ? "/version-history" : ""} onClick={() => {
@@ -88,42 +101,45 @@ const SettingsPage = inject('storeAppOptions', 'storeToolbarSettings', 'storePre
                             onOpenOptions('history');
                         }
                     }}>
-                        <Icon slot="media" icon="icon-version-history"></Icon>
+                        <SvgIcon slot="media" symbolId={IconVersionHistory.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {_canDownload &&
                     <ListItem title={_t.textDownload} link="/download/">
-                        <Icon slot="media" icon="icon-download"></Icon>
+                        <SvgIcon slot="media" symbolId={IconDownload.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {_canDownloadOrigin &&
                     <ListItem title={_t.textDownload} link="#" onClick={settingsContext.onDownloadOrigin} className='no-indicator'>
-                        <Icon slot="media" icon="icon-download"></Icon>
+                        <SvgIcon slot="media" symbolId={IconDownload.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {_canPrint &&
                     <ListItem className={disabledPreview && 'disabled'} title={_t.textPrint} onClick={settingsContext.onPrint}>
-                        <Icon slot="media" icon="icon-print"></Icon>
+                        <SvgIcon slot="media" symbolId={IconPrint.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {!(!_canDisplayInfo && isBranding) &&
                     <ListItem title={_t.textPresentationInfo} link="/presentation-info/">
-                        <Icon slot="media" icon="icon-info"></Icon>
+                        <SvgIcon slot="media" symbolId={IconInfo .id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {_canHelp &&
                     <ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={settingsContext.showHelp}>
-                        <Icon slot="media" icon="icon-help"></Icon>
+                        <SvgIcon slot="media" symbolId={IconHelp.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {_canAbout &&
                     <ListItem title={_t.textAbout} link="/about/">
-                        <Icon slot="media" icon="icon-about"></Icon>
+                        <SvgIcon slot="media" symbolId={IconAbout.id} className={'icon icon-svg'} />
                     </ListItem>
                 }
                 {_canFeedback &&
                     <ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={settingsContext.showFeedback}>
-                        <Icon slot="media" icon="icon-feedback"></Icon>
+                        {Device.ios ? 
+                            <SvgIcon slot="media" symbolId={IconFeedbackIos.id} className={'icon icon-svg'} /> :
+                            <SvgIcon slot="media" symbolId={IconFeedbackAndroid.id} className={'icon icon-svg'} />
+                        }
                     </ListItem>
                 }
                 {canCloseEditor &&