Button Icons: Migrate button icons to new api (#6505)

src/components/auth/AuthPhoneNumber.tsx

@@ -26,7 +26,6 @@ import useLangString from '../../hooks/useLangString';
 import useLastCallback from '../../hooks/useLastCallback';
 import useMultiaccountInfo from '../../hooks/useMultiaccountInfo';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import Checkbox from '../ui/Checkbox';
 import InputText from '../ui/InputText';
@@ -241,9 +240,14 @@ const AuthPhoneNumber: FC<StateProps> = ({
   return (
     <div id="auth-phone-number-form" className="custom-scroll">
       {hasActiveAccount && (
-        <Button size="smaller" round color="translucent" className="auth-close" onClick={handleBackNavigation}>
+        <Button
-          <Icon name="close" />
+          size="smaller"
-        </Button>
+          round
+          color="translucent"
+          className="auth-close"
+          iconName="close"
+          onClick={handleBackNavigation}
+        />
       )}
       <div className="auth-form">
         <div id="logo" />

src/components/auth/AuthQrCode.tsx

@@ -23,7 +23,6 @@ import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecat
 import useMultiaccountInfo from '../../hooks/useMultiaccountInfo';
 
 import AnimatedIcon from '../common/AnimatedIcon';
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import Loading from '../ui/Loading';
 
@@ -157,9 +156,14 @@ const AuthCode = ({
   return (
     <div id="auth-qr-form" className="custom-scroll">
       {hasActiveAccount && (
-        <Button size="smaller" round color="translucent" className="auth-close" onClick={handleBackNavigation}>
+        <Button
-          <Icon name="close" />
+          size="smaller"
-        </Button>
+          round
+          color="translucent"
+          className="auth-close"
+          iconName="close"
+          onClick={handleBackNavigation}
+        />
       )}
       <div className="auth-form qr">
         <div className="qr-outer">

src/components/calls/group/GroupCall.tsx

@@ -30,7 +30,6 @@ import useOldLang from '../../../hooks/useOldLang';
 import { useFullscreenStatus } from '../../../hooks/window/useFullscreen';
 import useGroupCallVideoLayout from './hooks/useGroupCallVideoLayout';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Checkbox from '../../ui/Checkbox';
 import FloatingActionButton from '../../ui/FloatingActionButton';
@@ -273,9 +272,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
                 onClick={handleToggleFullscreen}
                 className={buildClassName(styles.headerButton, styles.firstButton)}
                 ariaLabel={lang(isFullscreen ? 'AccExitFullscreen' : 'AccSwitchToFullscreen')}
-              >
+                iconName={isFullscreen ? 'smallscreen' : 'fullscreen'}
-                <Icon name={isFullscreen ? 'smallscreen' : 'fullscreen'} />
+              />
-              </Button>
             )}
 
             <h3 className={buildClassName(styles.title, styles.bigger)}>
@@ -290,9 +288,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
                 className={buildClassName(styles.headerButton, styles.videosHeaderLastButton)}
                 onClick={handleToggleSidebar}
                 ariaLabel={lang('AccDescrExpandPanel')}
-              >
+                iconName="sidebar"
-                <Icon name="sidebar" />
+              />
-              </Button>
             )}
           </div>
 
@@ -320,9 +317,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
                 )}
                 onClick={handleToggleFullscreen}
                 ariaLabel={lang('AccSwitchToFullscreen')}
-              >
+                iconName="fullscreen"
-                <Icon name="fullscreen" />
+              />
-              </Button>
             )}
 
             {isMobile && (
@@ -333,9 +329,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
                 onClick={handleToggleGroupCallPanel}
                 className={buildClassName(styles.headerButton, styles.firstButton)}
                 ariaLabel={lang('Close')}
-              >
+                iconName="close"
-                <Icon name="close" />
+              />
-              </Button>
             )}
 
             {isLandscapeWithVideos && (
@@ -350,9 +345,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
                 color="translucent"
                 onClick={handleToggleSidebar}
                 ariaLabel={lang('AccDescrCollapsePanel')}
-              >
+                iconName="sidebar"
-                <Icon name="sidebar" />
+              />
-              </Button>
             )}
 
             <div className={styles.panelHeaderText}>
@@ -378,9 +372,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
                 color="translucent"
                 onClick={handleInviteMember}
                 ariaLabel={lang('VoipGroupInviteMember')}
-              >
+                iconName="add-user"
-                <Icon name="add-user" />
+              />
-              </Button>
             )}
           </div>
 
@@ -470,9 +463,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
           onClick={handleClickVideo}
           ariaLabel={lang(hasVideo ? 'VoipStopVideo' : 'VoipStartVideo')}
           disabled={isConnecting}
-        >
+          iconName={!hasVideo ? 'video-stop' : 'video'}
-          <Icon name={!hasVideo ? 'video-stop' : 'video'} />
+        />
-        </Button>
 
         <Button
           round
@@ -486,9 +478,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
           onClick={handleToggleGroupCallPresentation}
           ariaLabel={lang(hasPresentation ? 'lng_group_call_screen_share_stop' : 'lng_group_call_tooltip_screen')}
           disabled={isConnecting || !IS_SCREENSHARE_SUPPORTED}
-        >
+          iconName={!hasPresentation ? 'share-screen-stop' : 'share-screen'}
-          <Icon name={!hasPresentation ? 'share-screen-stop' : 'share-screen'} />
+        />
-        </Button>
 
         <MicrophoneButton className={styles.actionButton} />
 
@@ -503,9 +494,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
           )}
           ariaLabel={lang('lng_group_call_settings')}
           disabled
-        >
+          iconName="settings-filled"
-          <Icon name="settings-filled" />
+        />
-        </Button>
 
         <Button
           round
@@ -517,9 +507,8 @@ const GroupCall: FC<OwnProps & StateProps> = ({
           )}
           onClick={handleLeaveGroupCall}
           ariaLabel={lang('lng_group_call_leave')}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
       </div>
 
       <Modal

src/components/calls/group/GroupCallParticipantVideo.tsx

@@ -25,7 +25,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
 import FullNameTitle from '../../common/FullNameTitle';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Skeleton from '../../ui/placeholder/Skeleton';
 import GroupCallParticipantMenu from './GroupCallParticipantMenu';
@@ -287,9 +286,8 @@ const GroupCallParticipantVideo: FC<OwnProps & StateProps> = ({
             className={styles.pinButton}
             ariaLabel={lang(isPinned ? 'lng_group_call_context_unpin_camera' : 'lng_group_call_context_pin_camera')}
             onClick={handleClickPin}
-          >
+            iconName={isPinned ? 'unpin' : 'pin'}
-            <Icon name={isPinned ? 'unpin' : 'pin'} />
+          />
-          </Button>
         )}
         <div className={styles.bottomPanel}>
           <div className={styles.info}>

src/components/calls/phone/PhoneCall.tsx

@@ -32,7 +32,6 @@ import useOldLang from '../../../hooks/useOldLang';
 
 import AnimatedIcon from '../../common/AnimatedIcon';
 import Avatar from '../../common/Avatar';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
 import PhoneCallButton from './PhoneCallButton';
@@ -271,22 +270,20 @@ const PhoneCall: FC<StateProps> = ({
             round
             size="smaller"
             color="translucent"
+            iconName={isFullscreen ? 'smallscreen' : 'fullscreen'}
             onClick={handleToggleFullscreen}
             ariaLabel={lang(isFullscreen ? 'AccExitFullscreen' : 'AccSwitchToFullscreen')}
-          >
+          />
-            <Icon name={isFullscreen ? 'smallscreen' : 'fullscreen'} />
-          </Button>
         )}
 
         <Button
           round
           size="smaller"
           color="translucent"
+          iconName="close"
           onClick={handleClose}
           className={styles.closeButton}
-        >
+        />
-          <Icon name="close" />
-        </Button>
       </div>
       <div
         className={buildClassName(styles.emojisBackdrop, isEmojiOpen && styles.open)}

src/components/common/Audio.tsx

@@ -457,9 +457,8 @@ const Audio = ({
           className="download-button"
           ariaLabel={isDownloading ? 'Cancel download' : 'Download'}
           onClick={handleDownloadClick}
-        >
+          iconName={isDownloading ? 'close' : 'arrow-down'}
-          <Icon name={isDownloading ? 'close' : 'arrow-down'} />
+        />
-        </Button>
       )}
       {origin === AudioOrigin.Search && renderWithTitle()}
       {origin !== AudioOrigin.Search && audio && renderAudio(

src/components/common/CalendarModal.tsx

@@ -16,7 +16,6 @@ import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
 
 import Button from '../ui/Button';
 import Modal from '../ui/Modal';
-import Icon from './icons/Icon';
 
 import './CalendarModal.scss';
 
@@ -265,10 +264,9 @@ const CalendarModal: FC<OwnProps> = ({
             round
             size="smaller"
             color="translucent"
+            iconName="close"
             onClick={onClose}
-          >
+          />
-            <Icon name="close" />
-          </Button>
 
           <h4>
             {lang(`lng_month${currentMonth + 1}`)}
@@ -280,21 +278,19 @@ const CalendarModal: FC<OwnProps> = ({
             round
             size="smaller"
             color="translucent"
+            iconName="previous"
             disabled={shouldDisablePrevMonth}
             onClick={!shouldDisablePrevMonth ? handlePrevMonth : undefined}
-          >
+          />
-            <Icon name="previous" />
-          </Button>
 
           <Button
             round
             size="smaller"
             color="translucent"
+            iconName="next"
             disabled={shouldDisableNextMonth}
             onClick={!shouldDisableNextMonth ? handleNextMonth : undefined}
-          >
+          />
-            <Icon name="next" />
-          </Button>
         </div>
       </div>
 

src/components/common/Composer.tsx

@@ -2216,9 +2216,8 @@ const Composer: FC<OwnProps & StateProps> = ({
                           ariaLabel={lang(
                             isSilentPosting ? 'AriaComposerSilentPostingDisable' : 'AriaComposerSilentPostingEnable',
                           )}
-                        >
+                          iconName={isSilentPosting ? 'mute' : 'unmute'}
-                          <Icon name={isSilentPosting ? 'mute' : 'unmute'} />
+                        />
-                        </Button>
                       </Transition>
                     )}
                     {withScheduledButton && (
@@ -2229,9 +2228,8 @@ const Composer: FC<OwnProps & StateProps> = ({
                         color="translucent"
                         onClick={handleAllScheduledClick}
                         ariaLabel={lang('AriaComposerOpenScheduled')}
-                      >
+                        iconName="scheduled"
-                        <Icon name="scheduled" />
+                      />
-                      </Button>
                     )}
                     {shouldShowGiftButton && (
                       <Button
@@ -2240,9 +2238,8 @@ const Composer: FC<OwnProps & StateProps> = ({
                         className="composer-action-button"
                         color="translucent"
                         onClick={handleGiftClick}
-                      >
+                        iconName="gift"
-                        <Icon name="gift" />
+                      />
-                      </Button>
                     )}
                     {shouldShowSuggestedPostButton && (
                       <Button
@@ -2251,9 +2248,8 @@ const Composer: FC<OwnProps & StateProps> = ({
                         className="composer-action-button"
                         color="translucent"
                         onClick={handleSuggestPostClick}
-                      >
+                        iconName="cash-circle"
-                        <Icon name="cash-circle" />
+                      />
-                      </Button>
                     )}
                     {Boolean(botKeyboardMessageId) && !activeVoiceRecording && !editingMessage && (
                       <ResponsiveHoverButton
@@ -2367,9 +2363,8 @@ const Composer: FC<OwnProps & StateProps> = ({
           className="cancel"
           onClick={stopRecordingVoice}
           ariaLabel="Cancel voice recording"
-        >
+          iconName="delete"
-          <Icon name="delete" />
+        />
-        </Button>
       )}
       {isInStoryViewer && !activeVoiceRecording && (
         <Button

src/components/common/CountryPickerModal.tsx

@@ -14,7 +14,6 @@ import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
 
 import Button from '../ui/Button';
 import Modal from '../ui/Modal';
-import Icon from './icons/Icon';
 import ItemPicker from './pickers/ItemPicker';
 
 import styles from './CountryPickerModal.module.scss';
@@ -85,9 +84,8 @@ const CountryPickerModal: FC<OwnProps> = ({
             size="smaller"
             color="translucent"
             onClick={onClose}
-          >
+            iconName="close"
-            <Icon name="close" />
+          />
-          </Button>
 
           <h4 className={styles.pickerTitle}>
             {lang('BoostingSelectCountry')}

src/components/common/GifButton.tsx

@@ -25,7 +25,6 @@ import Menu from '../ui/Menu';
 import MenuItem from '../ui/MenuItem';
 import OptimizedVideo from '../ui/OptimizedVideo';
 import Spinner from '../ui/Spinner';
-import Icon from './icons/Icon';
 
 import './GifButton.scss';
 
@@ -139,11 +138,11 @@ const GifButton: FC<OwnProps> = ({
           className="gif-unsave-button"
           color="dark"
           pill
+          iconName="close"
+          iconClassName="gif-unsave-button-icon"
           noFastClick
           onClick={handleUnsaveClick}
-        >
+        />
-          <Icon name="close" className="gif-unsave-button-icon" />
-        </Button>
       )}
       {withThumb && (
         <canvas

src/components/common/LinkField.tsx

@@ -13,7 +13,6 @@ import useOldLang from '../../hooks/useOldLang';
 import Button from '../ui/Button';
 import DropdownMenu from '../ui/DropdownMenu';
 import MenuItem from '../ui/MenuItem';
-import Icon from './icons/Icon';
 
 import styles from './LinkField.module.scss';
 
@@ -68,11 +67,10 @@ const InviteLink: FC<OwnProps> = ({
         size="smaller"
         color="translucent"
         className={isOpen ? 'active' : ''}
+        iconName="more"
         onClick={onTrigger}
         ariaLabel={lang('AriaLabelOpenMenu')}
-      >
+      />
-        <Icon name="more" />
-      </Button>
     );
   }, [isMobile, lang]);
 
@@ -94,11 +92,10 @@ const InviteLink: FC<OwnProps> = ({
             className={styles.copy}
             size="smaller"
             round
+            iconName="copy"
             disabled={isDisabled}
             onClick={handleCopyClick}
-          >
+          />
-            <Icon name="copy" />
-          </Button>
         ) : (
           <DropdownMenu
             className={styles.moreMenu}

src/components/common/PrivacySettingsNoticeModal.tsx

@@ -17,7 +17,6 @@ import Button from '../ui/Button';
 import Modal, { ANIMATION_DURATION } from '../ui/Modal';
 import Separator from '../ui/Separator';
 import AnimatedIconWithPreview from './AnimatedIconWithPreview';
-import Icon from './icons/Icon';
 
 import styles from './PrivacySettingsNoticeModal.module.scss';
 
@@ -91,9 +90,8 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
           size="smaller"
           onClick={handleClose}
           ariaLabel="Close"
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
         <AnimatedIconWithPreview
           tgsUrl={isReadDate ? LOCAL_TGS_URLS.ReadTime : LOCAL_TGS_URLS.LastSeen}
           size={84}

src/components/common/SliderDots.tsx

@@ -5,7 +5,6 @@ import { IS_TOUCH_ENV } from '../../util/browser/windowEnvironment';
 import buildClassName from '../../util/buildClassName';
 
 import Button from '../ui/Button';
-import Icon from './icons/Icon';
 
 import styles from './SliderDots.module.scss';
 
@@ -46,9 +45,8 @@ const SliderDots: FC<OwnProps> = ({
           disabled={active === 0}
           round
           onClick={handleGoBack}
-        >
+          iconName="previous"
-          <Icon name="previous" />
+        />
-        </Button>
       )}
       <div className={styles.root} style={`--start-from: ${startFrom}; --length: ${length}; --count: ${count};`}>
         {Array(length).fill(undefined).map((_, i) => {
@@ -81,9 +79,8 @@ const SliderDots: FC<OwnProps> = ({
           round
           disabled={active === length - 1}
           onClick={handleGoForward}
-        >
+          iconName="next"
-          <Icon name="next" />
+        />
-        </Button>
       )}
     </div>
   );

src/components/common/StickerButton.tsx

@@ -329,9 +329,8 @@ const StickerButton = <T extends number | ApiSticker | ApiBotInlineMediaResult |
           round
           noFastClick
           onClick={handleRemoveClick}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
       )}
       {Boolean(contextMenuItems.length) && (
         <Menu

src/components/common/StickerSet.tsx

@@ -347,9 +347,8 @@ const StickerSet: FC<OwnProps & StateProps> = ({
             color="translucent"
             onClick={handleDefaultStatusIconClick}
             key="default-status-icon"
-          >
+            iconName="star"
-            <Icon name="star" />
+          />
-          </Button>
         )}
         {shouldRender && stickerSet.reactions?.map((reaction) => {
           const reactionId = getReactionKey(reaction);

src/components/common/StickerSetModal.tsx

@@ -39,7 +39,6 @@ import DropdownMenu from '../ui/DropdownMenu';
 import Loading from '../ui/Loading';
 import MenuItem from '../ui/MenuItem';
 import Modal from '../ui/Modal';
-import Icon from './icons/Icon';
 import StickerButton from './StickerButton';
 
 import './StickerSetModal.scss';
@@ -183,9 +182,8 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
         className={isMenuOpen ? 'active' : ''}
         onClick={onTrigger}
         ariaLabel="More actions"
-      >
+        iconName="more"
-        <Icon name="more" />
+      />
-      </Button>
     );
   }, [isMobile]);
 
@@ -194,9 +192,14 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
 
     return (
       <div className={fullClassName} dir={lang.isRtl ? 'rtl' : undefined}>
-        <Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose}>
+        <Button
-          <Icon name="close" />
+          round
-        </Button>
+          color="translucent"
+          size="smaller"
+          ariaLabel={lang('Close')}
+          onClick={onClose}
+          iconName="close"
+        />
         <div className="modal-title">
           {renderingStickerSet ? renderText(renderingStickerSet.title, ['emoji', 'links']) : lang('AccDescrStickerSet')}
         </div>

src/components/common/pickers/ChatOrUserPicker.tsx

@@ -35,7 +35,6 @@ import Modal from '../../ui/Modal';
 import Transition from '../../ui/Transition';
 import Avatar from '../Avatar';
 import FullNameTitle from '../FullNameTitle';
-import Icon from '../icons/Icon';
 import TopicIcon from '../TopicIcon';
 import PickerItem from './PickerItem';
 
@@ -247,9 +246,14 @@ const ChatOrUserPicker: FC<OwnProps> = ({
     return (
       <>
         <div className="modal-header modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
-          <Button round color="translucent" size="smaller" ariaLabel={oldLang('Back')} onClick={handleHeaderBackClick}>
+          <Button
-            <Icon name="arrow-left" />
+            round
-          </Button>
+            color="translucent"
+            size="smaller"
+            ariaLabel={oldLang('Back')}
+            onClick={handleHeaderBackClick}
+            iconName="arrow-left"
+          />
           <InputText
             ref={topicSearchRef}
             value={topicSearch}
@@ -300,9 +304,8 @@ const ChatOrUserPicker: FC<OwnProps> = ({
             size="smaller"
             ariaLabel={oldLang('Close')}
             onClick={onClose}
-          >
+            iconName="close"
-            <Icon name="close" />
+          />
-          </Button>
           <InputText
             ref={searchRef}
             value={search}

src/components/left/ArchivedChats.tsx

@@ -16,7 +16,6 @@ import useOldLang from '../../hooks/useOldLang';
 import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated';
 import useLeftHeaderButtonRtlForumTransition from './main/hooks/useLeftHeaderButtonRtlForumTransition';
 
-import Icon from '../common/icons/Icon';
 import StoryRibbon from '../story/StoryRibbon';
 import StoryToggler from '../story/StoryToggler';
 import Button from '../ui/Button';
@@ -98,9 +97,8 @@ const ArchivedChats: FC<OwnProps> = ({
             shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition',
           )}
           onTransitionEnd={handleDropdownMenuTransitionEnd}
-        >
+          iconName="arrow-left"
-          <Icon name="arrow-left" />
+        />
-        </Button>
         {shouldRenderTitle && <h3 className={titleClassNames}>{lang('ArchivedChats')}</h3>}
         <div className="story-toggler-wrapper">
           <StoryToggler canShow isArchived />

src/components/left/ConnectionStatusOverlay.tsx

@@ -5,7 +5,6 @@ import type { ConnectionStatus } from '../../hooks/useConnectionStatus';
 
 import useOldLang from '../../hooks/useOldLang';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import Spinner from '../ui/Spinner';
 import Transition from '../ui/Transition';
@@ -37,9 +36,8 @@ const ConnectionStatusOverlay: FC<OwnProps> = ({
         round
         size="tiny"
         color="translucent-black"
-      >
+        iconName="close"
-        <Icon name="close" />
+      />
-      </Button>
     </div>
   );
 };

src/components/left/main/EmptyFolder.tsx

@@ -12,7 +12,6 @@ import useAppLayout from '../../../hooks/useAppLayout';
 import useOldLang from '../../../hooks/useOldLang';
 
 import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 
 import styles from './EmptyFolder.module.scss';
@@ -56,10 +55,10 @@ const EmptyFolder: FC<OwnProps & StateProps> = ({
           ripple={!isMobile}
           fluid
           pill
+          iconName="settings"
           onClick={handleEditFolder}
           isRtl={lang.isRtl}
         >
-          <Icon name="settings" />
           <div className={styles.buttonText}>
             {lang('ChatList.EmptyChatListEditFilter')}
           </div>

src/components/left/main/LeftMainHeader.tsx

@@ -297,9 +297,8 @@ const LeftMainHeader = ({
             ariaLabel={`${oldLang('ShortcutsController.Others.LockByPasscode')} (Ctrl+Shift+L)`}
             onClick={handleLockScreen}
             className={buildClassName(!isCurrentUserPremium && 'extra-spacing')}
-          >
+            iconName="lock"
-            <Icon name="lock" />
+          />
-          </Button>
         )}
         <ShowTransition
           isOpen={connectionStatusPosition === 'overlay'}

src/components/left/main/forum/ForumPanel.tsx

@@ -39,7 +39,6 @@ import useOrderDiff from '../hooks/useOrderDiff';
 
 import GroupCallTopPane from '../../../calls/group/GroupCallTopPane';
 import GroupChatInfo from '../../../common/GroupChatInfo';
-import Icon from '../../../common/icons/Icon';
 import PrivateChatInfo from '../../../common/PrivateChatInfo';
 import HeaderActions from '../../../middle/HeaderActions';
 import Button from '../../../ui/Button';
@@ -252,9 +251,8 @@ const ForumPanel = ({
           color="translucent"
           onClick={handleClose}
           ariaLabel={lang('Close')}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
 
         {isUserId(chat.id) ? (
           <PrivateChatInfo

src/components/left/newChat/NewChatStep1.tsx

@@ -11,7 +11,6 @@ import sortChatIds from '../../common/helpers/sortChatIds';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import useOldLang from '../../../hooks/useOldLang';
 
-import Icon from '../../common/icons/Icon';
 import PeerPicker from '../../common/pickers/PeerPicker';
 import Button from '../../ui/Button';
 import FloatingActionButton from '../../ui/FloatingActionButton';
@@ -96,9 +95,8 @@ const NewChatStep1: FC<OwnProps & StateProps> = ({
           color="translucent"
           onClick={onReset}
           ariaLabel="Return to Chat List"
-        >
+          iconName="arrow-left"
-          <Icon name="arrow-left" />
+        />
-        </Button>
         <h3>{lang('GroupAddMembers')}</h3>
       </div>
       <div className="NewChat-inner step-1">

src/components/left/newChat/NewChatStep2.tsx

@@ -14,7 +14,6 @@ import { selectTabState } from '../../../global/selectors';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import useOldLang from '../../../hooks/useOldLang';
 
-import Icon from '../../common/icons/Icon';
 import PrivateChatInfo from '../../common/PrivateChatInfo';
 import AvatarEditable from '../../ui/AvatarEditable';
 import Button from '../../ui/Button';
@@ -155,12 +154,10 @@ const NewChatStep2: FC<OwnProps & StateProps> = ({
           round
           size="smaller"
           color="translucent"
-
           onClick={() => onReset()}
           ariaLabel="Return to member selection"
-        >
+          iconName="arrow-left"
-          <Icon name="arrow-left" />
+        />
-        </Button>
         <h3>{lang(isChannel ? 'NewChannel' : 'NewGroup')}</h3>
       </div>
       <div className="NewChat-inner step-2">

src/components/left/search/RecentContacts.tsx

@@ -16,7 +16,6 @@ import useHorizontalScroll from '../../../hooks/useHorizontalScroll';
 import useOldLang from '../../../hooks/useOldLang';
 
 import Avatar from '../../common/Avatar';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import LeftSearchResultChat from './LeftSearchResultChat';
 
@@ -112,9 +111,8 @@ const RecentContacts: FC<OwnProps & StateProps> = ({
               ariaLabel={lang('Clear')}
               onClick={handleClearRecentlyFoundChats}
               isRtl={lang.isRtl}
-            >
+              iconName="close"
-              <Icon name="close" />
+            />
-            </Button>
           </h3>
           {recentlyFoundChatIds.map((id) => (
             <LeftSearchResultChat

src/components/left/settings/SettingsActiveSession.tsx

@@ -11,7 +11,6 @@ import getSessionIcon from './helpers/getSessionIcon';
 import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
 import useLang from '../../../hooks/useLang';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import ListItem from '../../ui/ListItem';
 import Modal from '../../ui/Modal';
@@ -63,9 +62,7 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
   function renderHeader() {
     return (
       <div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
-        <Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose}>
+        <Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose} iconName="close" />
-          <Icon name="close" />
-        </Button>
         <div className="modal-title">{lang('SessionPreviewTitle')}</div>
         <Button
           color="danger"

src/components/left/settings/SettingsActiveWebsite.tsx

@@ -11,7 +11,6 @@ import useOldLang from '../../../hooks/useOldLang';
 
 import Avatar from '../../common/Avatar';
 import FullNameTitle from '../../common/FullNameTitle';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
 
@@ -52,9 +51,7 @@ const SettingsActiveWebsite: FC<OwnProps & StateProps> = ({
   function renderHeader() {
     return (
       <div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
-        <Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose}>
+        <Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose} iconName="close" />
-          <Icon name="close" />
-        </Button>
         <div className="modal-title">{lang('WebSessionsTitle')}</div>
         <Button
           color="danger"

src/components/left/settings/SettingsHeader.tsx

@@ -11,7 +11,6 @@ import useLang from '../../../hooks/useLang';
 import useMultiClick from '../../../hooks/useMultiClick';
 import useOldLang from '../../../hooks/useOldLang';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import ConfirmDialog from '../../ui/ConfirmDialog';
 import DropdownMenu from '../../ui/DropdownMenu';
@@ -70,9 +69,8 @@ const SettingsHeader: FC<OwnProps> = ({
         className={isOpen ? 'active' : ''}
         onClick={onTrigger}
         ariaLabel="More actions"
-      >
+        iconName="more"
-        <Icon name="more" />
+      />
-      </Button>
     );
   }, [isMobile]);
 
@@ -268,12 +266,10 @@ const SettingsHeader: FC<OwnProps> = ({
               ripple={!isMobile}
               size="smaller"
               color="translucent"
-
               onClick={() => openSettingsScreen({ screen: SettingsScreens.EditProfile })}
               ariaLabel={oldLang('lng_settings_information')}
-            >
+              iconName="edit"
-              <Icon name="edit" />
+            />
-            </Button>
             <DropdownMenu
               className="settings-more-menu"
               trigger={SettingsMenuButton}
@@ -294,9 +290,8 @@ const SettingsHeader: FC<OwnProps> = ({
         color="translucent"
         onClick={onReset}
         ariaLabel={oldLang('AccDescrGoBack')}
-      >
+        iconName="arrow-left"
-        <Icon name="arrow-left" />
+      />
-      </Button>
       {renderHeaderContent()}
       <ConfirmDialog
         isOpen={isSignOutDialogOpen}

src/components/left/settings/folders/SettingsFoldersMain.tsx

@@ -238,15 +238,14 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
 
         {canCreateNewFolder && (
           <Button
-          // TODO: Move icon into button prop
             className="settings-button with-icon"
             color="primary"
             pill
             fluid
             onClick={handleCreateFolder}
             isRtl={lang.isRtl}
+            iconName="add"
           >
-            <Icon name="add" />
             {lang('CreateNewFilter')}
           </Button>
         )}

src/components/main/FoldersSidebar.tsx

@@ -16,7 +16,6 @@ import useLastCallback from '../../hooks/useLastCallback';
 import useScrolledState from '../../hooks/useScrolledState';
 
 import FolderIcon from '../common/FolderIcon';
-import Icon from '../common/icons/Icon';
 import MainMenuDropdown from '../common/MainMenuDropdown';
 import Button from '../ui/Button';
 import Folder from '../ui/Folder';
@@ -122,9 +121,9 @@ const FoldersSidebar = ({
         className={buildClassName(isOpen ? 'active' : '', styles.menuButton)}
         onClick={onTrigger}
         ariaLabel={lang('AriaLabelOpenMenu')}
-      >
+        iconName="menu"
-        <Icon name="menu" className={styles.icon} />
+        iconClassName={styles.icon}
-      </Button>
+      />
     );
   }, [lang]);
 
@@ -175,9 +174,9 @@ const FoldersSidebar = ({
         color="translucent"
         className={buildClassName(styles.menuButton, styles.settingsButton)}
         onClick={handleSettingsClick}
-      >
+        iconName="tools"
-        <Icon name="tools" className={styles.icon} />
+        iconClassName={styles.icon}
-      </Button>
+      />
     </div>
   );
 };

src/components/main/premium/GiveawayModal.tsx

@@ -698,9 +698,8 @@ const GiveawayModal: FC<OwnProps & StateProps> = ({
           color="translucent"
           onClick={handleClose}
           ariaLabel={lang('Close')}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
         <img className={styles.logo} src={PremiumLogo} alt="" draggable={false} />
         <h2 className={styles.headerText}>
           {renderText(lang('BoostingBoostsViaGifts'))}

src/components/main/premium/PremiumFeatureModal.tsx

@@ -27,7 +27,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated';
 
-import Icon from '../../common/icons/Icon';
 import SliderDots from '../../common/SliderDots';
 import Button from '../../ui/Button';
 import PremiumLimitPreview from './common/PremiumLimitPreview';
@@ -233,9 +232,8 @@ const PremiumFeatureModal: FC<OwnProps> = ({
         color={hasHeaderBackdrop ? 'translucent-white' : 'translucent'}
         onClick={onBack}
         ariaLabel={oldLang('Back')}
-      >
+        iconName="arrow-left"
-        <Icon name="arrow-left" />
+      />
-      </Button>
 
       <div className={styles.preview} />
 

src/components/main/premium/PremiumMainModal.tsx

@@ -38,7 +38,6 @@ import useOldLang from '../../../hooks/useOldLang';
 import useSyncEffect from '../../../hooks/useSyncEffect';
 
 import CustomEmoji from '../../common/CustomEmoji';
-import Icon from '../../common/icons/Icon';
 import ParticlesHeader from '../../modals/common/ParticlesHeader.tsx';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
@@ -440,9 +439,8 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
               color="translucent"
               onClick={() => closePremiumModal()}
               ariaLabel={oldLang('Close')}
-            >
+              iconName="close"
-              <Icon name="close" />
+            />
-            </Button>
             {renderHeader()}
             {!isPremium && !isGift && renderSubscriptionOptions()}
             <div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}>

src/components/main/premium/common/PremiumLimitReachedModal.module.scss

@@ -48,7 +48,6 @@
 }
 
 .x2 {
-  margin-inline-start: 0.25rem;
   font-size: 1.25rem;
 }
 

src/components/main/premium/common/PremiumLimitReachedModal.tsx

@@ -17,7 +17,6 @@ import useFlag from '../../../../hooks/useFlag';
 import useLang from '../../../../hooks/useLang';
 import useOldLang from '../../../../hooks/useOldLang';
 
-import Icon from '../../../common/icons/Icon';
 import Button from '../../../ui/Button';
 import Modal from '../../../ui/Modal';
 import PremiumLimitsCompare from './PremiumLimitsCompare';
@@ -213,9 +212,11 @@ const PremiumLimitReachedModal: FC<OwnProps & StateProps> = ({
               isText
               onClick={handleClick}
               color="primary"
+              iconName="double-badge"
+              iconClassName={styles.x2}
+              iconAlignment="end"
             >
               {lang('IncreaseLimit')}
-              <Icon name="double-badge" className={styles.x2} />
             </Button>
           )}
       </div>

src/components/mediaViewer/MediaViewer.tsx

@@ -59,7 +59,6 @@ import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
 import { dispatchPriorityPlaybackEvent } from '../../hooks/usePriorityPlaybackCheck';
 import { useMediaProps } from './hooks/useMediaProps';
 
-import Icon from '../common/icons/Icon';
 import ReportAvatarModal from '../common/ReportAvatarModal';
 import Button from '../ui/Button';
 import ShowTransition from '../ui/ShowTransition';
@@ -433,11 +432,10 @@ const MediaViewer = ({
             round
             size="smaller"
             color="translucent-white"
+            iconName="close"
             ariaLabel={lang('Close')}
             onClick={handleClose}
-          >
+          />
-            <Icon name="close" />
-          </Button>
         )}
         <Transition activeKey={animationKey.current!} name={headerAnimation}>
           <SenderInfo

src/components/mediaViewer/MediaViewerActions.tsx

@@ -164,9 +164,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
         className={isOpen ? 'active' : undefined}
         onClick={onTrigger}
         ariaLabel="More actions"
-      >
+        iconName="more"
-        <Icon name="more" />
+      />
-      </Button>
     );
   }, []);
 
@@ -209,9 +208,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
         size="smaller"
         color="translucent-white"
         ariaLabel={lang('AccActionDownload')}
-      >
+        iconName="download"
-        <Icon name="download" />
+      />
-      </Button>
     ));
   }
 
@@ -319,9 +317,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
           color="translucent-white"
           ariaLabel={lang('Forward')}
           onClick={onForward}
-        >
+          iconName="forward"
-          <Icon name="forward" />
+        />
-        </Button>
       )}
       {renderDownloadButton()}
       <Button
@@ -330,18 +327,16 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
         color="translucent-white"
         ariaLabel={lang('MediaZoomOut')}
         onClick={handleZoomOut}
-      >
+        iconName="zoom-out"
-        <Icon name="zoom-out" />
+      />
-      </Button>
       <Button
         round
         size="smaller"
         color="translucent-white"
         ariaLabel={lang('MediaZoomIn')}
         onClick={handleZoomIn}
-      >
+        iconName="zoom-in"
-        <Icon name="zoom-in" />
+      />
-      </Button>
       {canReportAvatar && (
         <Button
           round
@@ -349,9 +344,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
           color="translucent-white"
           ariaLabel={lang(isVideo ? 'PeerInfo.ReportProfileVideo' : 'PeerInfo.ReportProfilePhoto')}
           onClick={onReport}
-        >
+          iconName="flag"
-          <Icon name="flag" />
+        />
-        </Button>
       )}
       {canUpdate && (
         <Button
@@ -360,9 +354,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
           color="translucent-white"
           ariaLabel={lang('ProfilePhoto.SetMainPhoto')}
           onClick={handleUpdate}
-        >
+          iconName="copy-media"
-          <Icon name="copy-media" />
+        />
-        </Button>
       )}
       {canDelete && (
         <Button
@@ -371,9 +364,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
           color="translucent-white"
           ariaLabel={lang('Delete')}
           onClick={openDeleteModalHandler}
-        >
+          iconName="delete"
-          <Icon name="delete" />
+        />
-        </Button>
       )}
       <Button
         round
@@ -381,9 +373,8 @@ const MediaViewerActions: FC<OwnProps & StateProps> = ({
         color="translucent-white"
         ariaLabel={lang('Close')}
         onClick={onCloseMediaViewer}
-      >
+        iconName="close"
-        <Icon name="close" />
+      />
-      </Button>
       {canDelete && renderDeleteModal()}
     </div>
   );

src/components/mediaViewer/VideoPlayer.tsx

@@ -25,7 +25,6 @@ import useFullscreen from '../../hooks/window/useFullscreen';
 import useControlsSignal from './hooks/useControlsSignal';
 import useVideoWaitingSignal from './hooks/useVideoWaitingSignal';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import ProgressSpinner from '../ui/ProgressSpinner';
 import VideoPlayerControls from './VideoPlayerControls';
@@ -365,9 +364,7 @@ const VideoPlayer: FC<OwnProps> = ({
         />
       </div>
       {shouldRenderPlayButton && (
-        <Button round className={`play-button ${playButtonClassNames}`} onClick={togglePlayState}>
+        <Button round className={`play-button ${playButtonClassNames}`} onClick={togglePlayState} iconName="play" />
-          <Icon name="play" />
-        </Button>
       )}
       {shouldRenderSpinner && (
         <div className={['spinner-container', spinnerClassNames].join(' ')}>

src/components/mediaViewer/VideoPlayerControls.tsx

@@ -24,7 +24,6 @@ import useOldLang from '../../hooks/useOldLang';
 import useControlsSignal from './hooks/useControlsSignal';
 
 import AnimatedFileSize from '../common/AnimatedFileSize';
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import Menu from '../ui/Menu';
 import MenuItem from '../ui/MenuItem';
@@ -190,9 +189,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
           className="play"
           round
           onClick={onPlayPause}
-        >
+          iconName={isPlaying ? 'pause' : 'play'}
-          <Icon name={isPlaying ? 'pause' : 'play'} />
+        />
-        </Button>
         <Button
           ariaLabel="Volume"
           size="tiny"
@@ -200,9 +198,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
           className="volume"
           round
           onClick={onVolumeClick}
-        >
+          iconName={volumeIcon}
-          <Icon name={volumeIcon} />
+        />
-        </Button>
         {!IS_IOS && (
           <RangeSlider bold className="volume-slider" value={isMuted ? 0 : volume * 100} onChange={onVolumeChange} />
         )}
@@ -231,9 +228,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
             className="fullscreen"
             round
             onClick={onPictureInPictureChange}
-          >
+            iconName="pip"
-            <Icon name="pip" />
+          />
-          </Button>
         )}
         {isFullscreenSupported && (
           <Button
@@ -243,9 +239,8 @@ const VideoPlayerControls: FC<OwnProps> = ({
             className="fullscreen"
             round
             onClick={onChangeFullscreen}
-          >
+            iconName={isFullscreen ? 'smallscreen' : 'fullscreen'}
-            <Icon name={isFullscreen ? 'smallscreen' : 'fullscreen'} />
+          />
-          </Button>
         )}
       </div>
       <Menu

src/components/middle/HeaderActions.tsx

@@ -41,7 +41,6 @@ import { useHotkeys } from '../../hooks/useHotkeys';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import DropdownMenu from '../ui/DropdownMenu';
 import MenuItem from '../ui/MenuItem';
@@ -296,9 +295,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
         className={isOpen ? 'active' : ''}
         onClick={onTrigger}
         ariaLabel={lang('TranslateMessage')}
-      >
+        iconName="language"
-        <Icon name="language" />
+      />
-      </Button>
     );
   }, [isRightColumnShown, lang]);
 
@@ -382,9 +380,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
               size="smaller"
               onClick={handleSearchClick}
               ariaLabel={lang('Conversation.SearchPlaceholder')}
-            >
+              iconName="search"
-              <Icon name="search" />
+            />
-            </Button>
           )}
           {canCall && (
             <Button
@@ -393,9 +390,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
               size="smaller"
               onClick={handleRequestCall}
               ariaLabel="Call"
-            >
+              iconName="phone"
-              <Icon name="phone" />
+            />
-            </Button>
           )}
         </>
       )}
@@ -406,10 +402,10 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
           ripple={isRightColumnShown}
           color="translucent"
           size="smaller"
+          iconName="user"
           onClick={handleJoinRequestsClick}
           ariaLabel={isChannel ? lang('SubscribeRequests') : lang('MemberRequests')}
         >
-          <Icon name="user" />
           <div className="badge">{pendingJoinRequests}</div>
         </Button>
       )}
@@ -423,9 +419,8 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
         disabled={noMenu}
         ariaLabel="More actions"
         onClick={handleHeaderMenuOpen}
-      >
+        iconName="more"
-        <Icon name="more" />
+      />
-      </Button>
       {menuAnchor && (
         <HeaderMenuContainer
           chatId={chatId}

src/components/middle/MessageSelectToolbar.tsx

@@ -192,9 +192,8 @@ const MessageSelectToolbar: FC<OwnProps & StateProps> = ({
             round
             onClick={handleExitMessageSelectMode}
             ariaLabel="Exit select mode"
-          >
+            iconName="close"
-            <Icon name="close" />
+          />
-          </Button>
           <span className="MessageSelectToolbar-count" title={formattedMessagesCount}>
             {formattedMessagesCount}
           </span>

src/components/middle/MiddleColumn.tsx

@@ -82,7 +82,6 @@ import usePinnedMessage from './hooks/usePinnedMessage';
 import useFluidBackgroundFilter from './message/hooks/useFluidBackgroundFilter';
 
 import Composer from '../common/Composer';
-import Icon from '../common/icons/Icon';
 import PrivacySettingsNoticeModal from '../common/PrivacySettingsNoticeModal.async';
 import SeenByModal from '../common/SeenByModal.async';
 import UnpinAllMessagesModal from '../common/UnpinAllMessagesModal.async';
@@ -609,8 +608,8 @@ function MiddleColumn({
                       color="secondary"
                       className="composer-button unpin-all-button"
                       onClick={handleOpenUnpinModal}
+                      iconName="unpin"
                     >
-                      <Icon name="unpin" />
                       <span>{oldLang('Chat.Pinned.UnpinAll', pinnedMessagesCount, 'i')}</span>
                     </Button>
                   </div>

src/components/middle/ReactorListModal.tsx

@@ -155,10 +155,9 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
             className={buildClassName(!chosenTab && 'chosen')}
             size="tiny"
             ripple
-
+            iconName="heart"
             onClick={() => setChosenTab(undefined)}
           >
-            <Icon name="heart" />
             {Boolean(reactors?.count) && formatIntegerCompact(lang, reactors.count)}
           </Button>
           {allReactions.map((reaction) => {

src/components/middle/ScrollDownButton.tsx

@@ -10,7 +10,6 @@ import useContextMenuHandlers from '../../hooks/useContextMenuHandlers';
 import useLang from '../../hooks/useLang';
 import useOldLang from '../../hooks/useOldLang';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import Menu from '../ui/Menu';
 import MenuItem from '../ui/MenuItem';
@@ -54,9 +53,9 @@ const ScrollDownButton: FC<OwnProps> = ({
         onClick={onClick}
         onContextMenu={handleContextMenu}
         ariaLabel={oldLang(ariaLabelLang)}
-      >
+        iconName={icon}
-        <Icon name={icon} className={styles.icon} />
+        iconClassName={styles.icon}
-      </Button>
+      />
       {Boolean(unreadCount) && <div className={styles.unreadCount}>{formatIntegerCompact(lang, unreadCount)}</div>}
       {onReadAll && (
         <Menu

src/components/middle/composer/AttachmentModal.tsx

@@ -45,7 +45,6 @@ import useCustomEmojiTooltip from './hooks/useCustomEmojiTooltip';
 import useEmojiTooltip from './hooks/useEmojiTooltip';
 import useMentionTooltip from './hooks/useMentionTooltip';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import DropdownMenu from '../../ui/DropdownMenu';
 import MenuItem from '../../ui/MenuItem';
@@ -457,9 +456,8 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
         className={isMenuOpen ? 'active' : ''}
         onClick={onTrigger}
         ariaLabel="More actions"
-      >
+        iconName="more"
-        <Icon name="more" />
+      />
-      </Button>
     );
   }, [isMobile]);
 
@@ -533,9 +531,14 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
 
     return (
       <div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
-        <Button round color="translucent" size="smaller" ariaLabel="Cancel attachments" onClick={onClear}>
+        <Button
-          <Icon name="close" />
+          round
-        </Button>
+          color="translucent"
+          size="smaller"
+          ariaLabel="Cancel attachments"
+          onClick={onClear}
+          iconName="close"
+        />
         <div className="modal-title">{title}</div>
         {notEditingFile && !isInAlbum
           && (

src/components/middle/composer/ComposerEmbeddedMessage.tsx

@@ -326,9 +326,8 @@ const ComposerEmbeddedMessage = ({
           color="translucent"
           ariaLabel={oldLang('Cancel')}
           onClick={handleClearClick}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
         {(isShowingReply || isForwarding) && !isContextMenuDisabled && (
           <Menu
             isOpen={isContextMenuOpen}

src/components/middle/composer/EmojiPicker.tsx

@@ -24,7 +24,6 @@ import useOldLang from '../../../hooks/useOldLang';
 import useScrolledState from '../../../hooks/useScrolledState';
 import useAsyncRendering from '../../right/hooks/useAsyncRendering';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Loading from '../../ui/Loading';
 import Transition from '../../ui/Transition.tsx';
@@ -190,12 +189,10 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
         round
         faded
         color="translucent"
-
         onClick={() => selectCategory(index)}
         ariaLabel={category.name}
-      >
+        iconName={icon}
-        <Icon name={icon} />
+      />
-      </Button>
     );
   }
 

src/components/middle/composer/PollModal.tsx

@@ -13,7 +13,6 @@ import parseHtmlAsFormattedText from '../../../util/parseHtmlAsFormattedText';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Checkbox from '../../ui/Checkbox';
 import InputText from '../../ui/InputText';
@@ -249,9 +248,14 @@ const PollModal = ({
   function renderHeader() {
     return (
       <div className="modal-header-condensed">
-        <Button round color="translucent" size="smaller" ariaLabel="Cancel poll creation" onClick={onClear}>
+        <Button
-          <Icon name="close" />
+          round
-        </Button>
+          color="translucent"
+          size="smaller"
+          ariaLabel="Cancel poll creation"
+          onClick={onClear}
+          iconName="close"
+        />
         <div className="modal-title">{lang('NewPoll')}</div>
         <Button
           color="primary"
@@ -286,11 +290,9 @@ const PollModal = ({
             color="translucent"
             size="smaller"
             ariaLabel={lang('Delete')}
-
             onClick={() => removeOption(index)}
-          >
+            iconName="close"
-            <Icon name="close" />
+          />
-          </Button>
         )}
       </div>
     ));

src/components/middle/composer/SymbolMenu.tsx

@@ -23,7 +23,6 @@ import useOldLang from '../../../hooks/useOldLang';
 import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated';
 
 import CustomEmojiPicker from '../../common/CustomEmojiPicker';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Menu from '../../ui/Menu';
 import Portal from '../../ui/Portal';
@@ -273,9 +272,8 @@ const SymbolMenu: FC<OwnProps & StateProps> = ({
           className="symbol-close-button"
           size="tiny"
           onClick={onClose}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
       )}
       <SymbolMenuFooter
         activeTab={activeTab}

src/components/middle/composer/SymbolMenuFooter.tsx

@@ -6,7 +6,6 @@ import buildClassName from '../../../util/buildClassName';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 
 type OwnProps = {
@@ -80,9 +79,8 @@ const SymbolMenuFooter: FC<OwnProps> = ({
           faded
           color="translucent"
           onClick={handleSearchOpen}
-        >
+          iconName="search"
-          <Icon name="search" />
+        />
-        </Button>
       )}
 
       {canSendPlainText && renderTabButton(SymbolMenuTabs.Emoji)}
@@ -98,9 +96,8 @@ const SymbolMenuFooter: FC<OwnProps> = ({
           round
           faded
           color="translucent"
-        >
+          iconName="delete-left"
-          <Icon name="delete-left" />
+        />
-        </Button>
       )}
     </div>
   );

src/components/middle/composer/TextFormatter.tsx

@@ -22,7 +22,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated';
 import useVirtualBackdrop from '../../../hooks/useVirtualBackdrop';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 
 import './TextFormatter.scss';
@@ -422,61 +421,61 @@ const TextFormatter: FC<OwnProps> = ({
           ariaLabel={lang('FormattingSpoilerAria')}
           className={getFormatButtonClassName('spoiler')}
           onClick={handleSpoilerText}
-        >
+          iconName="eye-crossed"
-          <Icon name="eye-crossed" />
+        />
-        </Button>
         <div className="TextFormatter-divider" />
         <Button
           color="translucent"
           ariaLabel={lang('FormattingBoldAria')}
           className={getFormatButtonClassName('bold')}
           onClick={handleBoldText}
-        >
+          iconName="bold"
-          <Icon name="bold" />
+        />
-        </Button>
         <Button
           color="translucent"
           ariaLabel={lang('FormattingItalicAria')}
           className={getFormatButtonClassName('italic')}
           onClick={handleItalicText}
-        >
+          iconName="italic"
-          <Icon name="italic" />
+        />
-        </Button>
         <Button
           color="translucent"
           ariaLabel={lang('FormattingUnderlineAria')}
           className={getFormatButtonClassName('underline')}
           onClick={handleUnderlineText}
-        >
+          iconName="underlined"
-          <Icon name="underlined" />
+        />
-        </Button>
         <Button
           color="translucent"
           ariaLabel={lang('FormattingStrikethroughAria')}
           className={getFormatButtonClassName('strikethrough')}
           onClick={handleStrikethroughText}
-        >
+          iconName="strikethrough"
-          <Icon name="strikethrough" />
+        />
-        </Button>
         <Button
           color="translucent"
           ariaLabel={lang('FormattingMonospaceAria')}
           className={getFormatButtonClassName('monospace')}
           onClick={handleMonospaceText}
-        >
+          iconName="monospace"
-          <Icon name="monospace" />
+        />
-        </Button>
         <div className="TextFormatter-divider" />
-        <Button color="translucent" ariaLabel={lang('FormattingAddLinkAria')} onClick={openLinkControl}>
+        <Button
-          <Icon name="link" />
+          color="translucent"
-        </Button>
+          ariaLabel={lang('FormattingAddLinkAria')}
+          onClick={openLinkControl}
+          iconName="link"
+        />
       </div>
 
       <div className="TextFormatter-link-control">
         <div className="TextFormatter-buttons">
-          <Button color="translucent" ariaLabel={lang('Cancel')} onClick={closeLinkControl}>
+          <Button
-            <Icon name="arrow-left" />
+            color="translucent"
-          </Button>
+            ariaLabel={lang('Cancel')}
+            onClick={closeLinkControl}
+            iconName="arrow-left"
+          />
           <div className="TextFormatter-divider" />
 
           <div
@@ -504,9 +503,8 @@ const TextFormatter: FC<OwnProps> = ({
               ariaLabel={lang('Save')}
               className="color-primary"
               onClick={handleLinkUrlConfirm}
-            >
+              iconName="check"
-              <Icon name="check" />
+            />
-            </Button>
           </div>
         </div>
       </div>

src/components/middle/composer/ToDoListModal.tsx

@@ -19,7 +19,6 @@ import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Checkbox from '../../ui/Checkbox';
 import InputText from '../../ui/InputText';
@@ -291,9 +290,14 @@ const ToDoListModal = ({
       : editingMessage ? 'TitleEditToDoList' : 'TitleNewToDoList';
     return (
       <div className="modal-header-condensed">
-        <Button round color="translucent" size="smaller" ariaLabel={lang('AriaToDoCancel')} onClick={onClear}>
+        <Button
-          <Icon name="close" />
+          round
-        </Button>
+          color="translucent"
+          size="smaller"
+          ariaLabel={lang('AriaToDoCancel')}
+          onClick={onClear}
+          iconName="close"
+        />
         <div className="modal-title">{lang(modalTitle)}</div>
         <Button
           color="primary"
@@ -332,9 +336,8 @@ const ToDoListModal = ({
               size="smaller"
               ariaLabel={lang('Delete')}
               onClick={() => removeItem(stateIndex)}
-            >
+              iconName="close"
-              <Icon name="close" />
+            />
-            </Button>
           )}
         </div>
       );

src/components/middle/composer/WebPagePreview.tsx

@@ -236,9 +236,8 @@ const WebPagePreview = ({
           color="translucent"
           ariaLabel={lang('AccLinkRemovePreview')}
           onClick={handleClearWebpagePreview}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
         {!isEditing && renderContextMenu()}
       </div>
     </div>

src/components/middle/message/Message.tsx

@@ -1823,9 +1823,8 @@ const Message = ({
                   size="tiny"
                   ariaLabel={oldLang('lng_context_forward_msg')}
                   onClick={isLastInDocumentGroup ? handleGroupForward : handleForward}
-                >
+                  iconName="share-filled"
-                  <Icon name="share-filled" />
+                />
-                </Button>
               )}
               {canFocus && (
                 <Button
@@ -1835,9 +1834,8 @@ const Message = ({
                   size="tiny"
                   ariaLabel={lang('FocusMessage')}
                   onClick={isPinnedList ? handleFocus : handleFocusForwarded}
-                >
+                  iconName="arrow-right"
-                  <Icon name="arrow-right" />
+                />
-                </Button>
               )}
             </div>
           )}

src/components/middle/message/MessagePhoneCall.tsx

@@ -59,9 +59,8 @@ const MessagePhoneCall: FC<OwnProps> = ({
         className={styles.button}
         disabled={!ARE_CALLS_SUPPORTED}
         ariaLabel={lang(isOutgoing ? 'CallAgain' : 'CallBack')}
-      >
+        iconName={isVideo ? 'video-outlined' : 'phone'}
-        <Icon name={isVideo ? 'video-outlined' : 'phone'} />
+      />
-      </Button>
       <div className={styles.info}>
         <div className={styles.reason}>{lang(getCallMessageKey(phoneCall, message.isOutgoing))}</div>
         <div className={styles.meta}>

src/components/middle/message/Poll.tsx

@@ -26,7 +26,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
 import AvatarList from '../../common/AvatarList';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import CheckboxGroup from '../../ui/CheckboxGroup';
 import RadioGroup from '../../ui/RadioGroup';
@@ -263,9 +262,8 @@ const Poll: FC<OwnProps> = ({
             className="poll-quiz-help"
             onClick={showSolution}
             ariaLabel="Show Solution"
-          >
+            iconName="lamp"
-            <Icon name="lamp" />
+          />
-          </Button>
         )}
       </div>
       {canVote && (

src/components/middle/message/RoundVideo.tsx

@@ -245,9 +245,8 @@ const RoundVideo: FC<OwnProps> = ({
           size="smaller"
           className="play"
           nonInteractive
-        >
+          iconName="play"
-          <Icon name="play" />
+        />
-        </Button>
         <Icon name="view-once" />
       </div>
     );

src/components/middle/message/SimilarChannels.tsx

@@ -175,9 +175,8 @@ const SimilarChannels = ({
                 className={styles.close}
                 color="translucent"
                 onClick={handleToggle}
-              >
+                iconName="close"
-                <Icon name="close" />
+              />
-              </Button>
             </div>
             <div ref={ref} className={buildClassName(styles.channelList, 'no-scrollbar')}>
               {firstSimilarChannels?.map((channel, i) => {

src/components/middle/message/SponsoredMessage.tsx

@@ -33,7 +33,6 @@ import useOldLang from '../../../hooks/useOldLang';
 
 import Avatar from '../../common/Avatar';
 import BadgeButton from '../../common/BadgeButton';
-import Icon from '../../common/icons/Icon';
 import PeerColorWrapper from '../../common/PeerColorWrapper';
 import Button from '../../ui/Button';
 import MessageAppendix from './MessageAppendix';
@@ -300,23 +299,23 @@ const SponsoredMessage: FC<OwnProps & StateProps> = ({
             color="translucent-white"
             round
             size="tiny"
+            iconName="close"
+            iconClassName="sponsored-action-icon"
             ariaLabel={lang('Close')}
             onClick={handleHideSponsoredMessage}
-          >
+          />
-            <Icon name="close" className="sponsored-action-icon" />
-          </Button>
           {message.canReport && (
             <Button
               className="message-action-button"
               color="translucent-white"
               round
               size="tiny"
+              iconName="more"
+              iconClassName="sponsored-action-icon"
               ariaLabel={lang('More')}
               onClick={handleContextMenu}
               onContextMenu={handleContextMenu}
-            >
+            />
-              <Icon name="more" className="sponsored-action-icon" />
-            </Button>
           )}
         </div>
       </div>

src/components/middle/message/reactions/ReactionSelector.tsx

@@ -20,7 +20,6 @@ import buildClassName, { createClassNameBuilder } from '../../../../util/buildCl
 import useLastCallback from '../../../../hooks/useLastCallback';
 import useOldLang from '../../../../hooks/useOldLang';
 
-import Icon from '../../../common/icons/Icon';
 import Button from '../../../ui/Button';
 import Link from '../../../ui/Link';
 import ReactionSelectorCustomReaction from './ReactionSelectorCustomReaction';
@@ -227,9 +226,8 @@ const ReactionSelector: FC<OwnProps> = ({
                 color="translucent"
                 className={cn('show-more')}
                 onClick={handleShowMoreClick}
-              >
+                iconName="down"
-                <Icon name="down" />
+              />
-              </Button>
             )}
           </div>
         </div>

src/components/middle/panes/AudioPlayer.tsx

@@ -295,9 +295,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
         disabled={isFirst?.()}
         onClick={requestPreviousTrack}
         ariaLabel="Previous track"
-      >
+        iconName="skip-previous"
-        <Icon name="skip-previous" />
+      />
-      </Button>
       <Button
         round
         ripple={!isMobile}
@@ -319,9 +318,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
         disabled={isLast?.()}
         onClick={requestNextTrack}
         ariaLabel="Next track"
-      >
+        iconName="skip-next"
-        <Icon name="skip-next" />
+      />
-      </Button>
 
       <div className="volume-button-wrapper">
         <Button
@@ -332,9 +330,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
           ariaLabel="Volume"
           onClick={handleVolumeClick}
           ripple={!isMobile}
-        >
+          iconName={volumeIcon}
-          <Icon name={volumeIcon} />
+        />
-        </Button>
 
         {!IS_IOS && (
           <div className="volume-slider-wrapper">
@@ -370,9 +367,8 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
         size="smaller"
         onClick={handleClose}
         ariaLabel="Close player"
-      >
+        iconName="close"
-        <Icon name="close" />
+      />
-      </Button>
     </div>
   );
 };

src/components/middle/panes/ChatReportPane.tsx

@@ -17,7 +17,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 import useHeaderPane, { type PaneState } from '../hooks/useHeaderPane';
 
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import Checkbox from '../../ui/Checkbox';
 import ConfirmDialog from '../../ui/ConfirmDialog';
@@ -175,9 +174,8 @@ const ChatReportPane: FC<OwnProps & StateProps> = ({
         color="translucent"
         onClick={handleCloseReportPane}
         ariaLabel={lang('Close')}
-      >
+        iconName="close"
-        <Icon name="close" />
+      />
-      </Button>
       <ConfirmDialog
         isOpen={isBlockUserModalOpen}
         onClose={closeBlockUserModal}

src/components/middle/panes/HeaderPinnedMessage.tsx

@@ -262,9 +262,8 @@ const HeaderPinnedMessage = ({
           color="translucent"
           ariaLabel={lang('UnpinMessageAlertTitle')}
           onClick={openUnpinDialog}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
       )}
       <ConfirmDialog
         isOpen={isUnpinDialogOpen}

src/components/middle/search/MiddleSearch.tsx

@@ -52,7 +52,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
 import Avatar from '../../common/Avatar';
-import Icon from '../../common/icons/Icon';
 import PeerChip from '../../common/PeerChip';
 import Button from '../../ui/Button';
 import InfiniteScroll from '../../ui/InfiniteScroll';
@@ -697,12 +696,10 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
               round
               size="smaller"
               color="translucent"
-
               onClick={() => openHistoryCalendar({ selectedAt: getDayStartAt(Date.now()) })}
               ariaLabel={oldLang('JumpToDate')}
-            >
+              iconName="calendar"
-              <Icon name="calendar" />
+            />
-            </Button>
           </div>
         )}
       </div>
@@ -713,12 +710,10 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
             round
             size="smaller"
             color="translucent"
-
             onClick={() => openHistoryCalendar({ selectedAt: getDayStartAt(Date.now()) })}
             ariaLabel={oldLang('JumpToDate')}
-          >
+            iconName="calendar"
-            <Icon name="calendar" />
+          />
-          </Button>
           <div className={styles.counter}>
             {hasQueryData && (
               foundIds?.length ? (
@@ -750,9 +745,8 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
                 onClick={handleFocusOlder}
                 nonInteractive={!canFocusOlder}
                 ariaLabel={lang('AriaSearchOlderResult')}
-              >
+                iconName="up"
-                <Icon name="up" />
+              />
-              </Button>
               <Button
                 className={buildClassName(styles.navigationButton, !canFocusNewer && styles.navigationDisabled)}
                 round
@@ -761,9 +755,8 @@ const MiddleSearch: FC<OwnProps & StateProps> = ({
                 onClick={handleFocusNewer}
                 nonInteractive={!canFocusNewer}
                 ariaLabel={lang('AriaSearchNewerResult')}
-              >
+                iconName="down"
-                <Icon name="down" />
+              />
-              </Button>
             </div>
           )}
         </div>

src/components/modals/aboutAds/AboutAdsModal.tsx

@@ -12,7 +12,6 @@ import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
-import Icon from '../../common/icons/Icon';
 import SafeLink from '../../common/SafeLink';
 import SponsoredMessageContextMenuContainer from '../../middle/message/SponsoredContextMenuContainer';
 import Button from '../../ui/Button';
@@ -91,9 +90,8 @@ const AboutAdsModal = ({ modal, minLevelToRestrictAds }: OwnProps & StateProps)
           color="translucent"
           className={styles.moreButton}
           onClick={handleContextMenu}
-        >
+          iconName="more"
-          <Icon name="more" />
+        />
-        </Button>
       </>
     );
 

src/components/modals/collectible/CollectibleInfoModal.tsx

@@ -20,7 +20,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
 import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview';
-import Icon from '../../common/icons/Icon';
 import PeerChip from '../../common/PeerChip';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
@@ -110,9 +109,8 @@ const CollectibleInfoModal: FC<OwnProps & StateProps> = ({
         className={styles.closeButton}
         ariaLabel={lang('Close')}
         onClick={handleClose}
-      >
+        iconName="close"
-        <Icon name="close" />
+      />
-      </Button>
       <div className={styles.icon}>
         <AnimatedIconWithPreview
           tgsUrl={isUsername ? LOCAL_TGS_URLS.Mention : LOCAL_TGS_URLS.Fragment}

src/components/modals/gift/info/GiftInfoModal.module.scss

@@ -15,7 +15,6 @@
 
 .upgradeIcon {
   transform: rotateX(180deg);
-  margin-left: 0.25rem;
   font-size: 1.25rem;
 }
 

src/components/modals/gift/info/GiftInfoModal.tsx

@@ -375,27 +375,42 @@ const GiftInfoModal = ({
 
     if (canManage && savedGift?.alreadyPaidUpgradeStars && !savedGift.upgradeMsgId) {
       return (
-        <Button isShiny onClick={handleOpenUpgradeModal}>
+        <Button
+          isShiny
+          onClick={handleOpenUpgradeModal}
+          iconName="arrow-down-circle"
+          iconClassName={styles.upgradeIcon}
+          iconAlignment="end"
+        >
           {lang('GiftInfoUpgradeForFree')}
-          <Icon name="arrow-down-circle" className={styles.upgradeIcon} />
         </Button>
       );
     }
 
     if (canManage && savedGift?.canUpgrade && !savedGift.upgradeMsgId) {
       return (
-        <Button isShiny onClick={handleOpenUpgradeModal}>
+        <Button
+          isShiny
+          onClick={handleOpenUpgradeModal}
+          iconName="arrow-down-circle"
+          iconClassName={styles.upgradeIcon}
+          iconAlignment="end"
+        >
           {lang('GiftInfoUpgrade')}
-          <Icon name="arrow-down-circle" className={styles.upgradeIcon} />
         </Button>
       );
     }
 
     if (savedGift?.prepaidUpgradeHash) {
       return (
-        <Button isShiny onClick={handleOpenUpgradeModal}>
+        <Button
+          isShiny
+          onClick={handleOpenUpgradeModal}
+          iconName="arrow-down-circle"
+          iconClassName={styles.upgradeIcon}
+          iconAlignment="end"
+        >
           {lang('GiftAnUpgradeButton')}
-          <Icon name="arrow-down-circle" className={styles.upgradeIcon} />
         </Button>
       );
     }
@@ -804,9 +819,8 @@ const GiftInfoModal = ({
                 color="translucent"
                 ariaLabel="Delete original details"
                 onClick={handleRemoveMessage}
-              >
+                iconName="delete"
-                <Icon name="delete" />
+              />
-              </Button>
             )}
           </div>,
         ]);

src/components/modals/preparedMessage/PreparedMessageModal.tsx

@@ -18,7 +18,6 @@ import useCustomBackground from '../../../hooks/useCustomBackground';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
-import Icon from '../../common/icons/Icon';
 import Message from '../../middle/message/Message';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
@@ -95,9 +94,8 @@ const PreparedMessageModal: FC<OwnProps & StateProps> = ({
           size="smaller"
           ariaLabel={lang('Close')}
           onClick={handleCloseClick}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
         <h3 className={buildClassName('modal-title', styles.modalTitle)}>
           {lang('BotShareMessage')}
         </h3>

src/components/modals/profileRating/ProfileRatingModal.module.scss

@@ -112,7 +112,6 @@
 }
 
 .understoodIcon {
-  margin-right: 0.25rem;
   font-size: 1.1875rem;
 }
 

src/components/modals/profileRating/ProfileRatingModal.tsx

@@ -12,7 +12,6 @@ import { formatShortDuration } from '../../../util/dates/dateFormat';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
-import Icon from '../../common/icons/Icon';
 import PremiumProgress, { type AnimationDirection } from '../../common/PremiumProgress';
 import Button from '../../ui/Button';
 import Transition from '../../ui/Transition';
@@ -219,8 +218,9 @@ const ProfileRatingModal = ({
       <div className={styles.footer}>
         <Button
           onClick={handleClose}
+          iconName="understood"
+          iconClassName={styles.understoodIcon}
         >
-          <Icon name="understood" className={styles.understoodIcon} />
           {lang('ButtonUnderstood')}
         </Button>
       </div>

src/components/modals/quickPreview/QuickPreviewModalHeader.tsx

@@ -16,7 +16,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
 import GroupChatInfo from '../../common/GroupChatInfo';
-import Icon from '../../common/icons/Icon';
 import PrivateChatInfo from '../../common/PrivateChatInfo';
 import Button from '../../ui/Button';
 
@@ -79,9 +78,8 @@ const QuickPreviewModalHeader: FC<OwnProps & StateProps> = ({
           ariaLabel={lang('ChatListContextMaskAsRead')}
           onClick={handleMarkAsRead}
           className={styles.markAsReadButton}
-        >
+          iconName="readchats"
-          <Icon name="readchats" />
+        />
-        </Button>
       )}
       <Button
         round
@@ -90,9 +88,8 @@ const QuickPreviewModalHeader: FC<OwnProps & StateProps> = ({
         ariaLabel={lang('Close')}
         onClick={onClose}
         className={styles.closeButton}
-      >
+        iconName="close"
-        <Icon name="close" />
+      />
-      </Button>
       <div className="modal-title">
         <div className={styles.chatInfoOverride}>
           {isUserId(displayChatId) ? (

src/components/modals/reportAd/ReportAdModal.tsx

@@ -11,7 +11,6 @@ import buildClassName from '../../../util/buildClassName';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
-import Icon from '../../common/icons/Icon';
 import SafeLink from '../../common/SafeLink';
 import Button from '../../ui/Button';
 import ListItem from '../../ui/ListItem';
@@ -86,9 +85,8 @@ const ReportAdModal = ({
           size="smaller"
           ariaLabel={lang(renderingDepth ? 'Back' : 'Close')}
           onClick={handleBackClick}
-        >
+          iconName={renderingDepth ? 'arrow-left' : 'close'}
-          <Icon name={renderingDepth ? 'arrow-left' : 'close'} />
+        />
-        </Button>
         <div className={buildClassName('modal-title', styles.modalTitle, hasSubtitle && styles.titleMultiline)}>
           <h3 className={styles.title}>{lang('ReportAd')}</h3>
           {hasSubtitle && (

src/components/modals/reportModal/ReportModal.tsx

@@ -14,7 +14,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
 import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 import ListItem from '../../ui/ListItem';
 import Modal from '../../ui/Modal';
@@ -90,9 +89,8 @@ const ReportModal = ({
             size="smaller"
             ariaLabel={lang('Back')}
             onClick={handleBackClick}
-          >
+            iconName="arrow-left"
-            <Icon name="arrow-left" />
+          />
-          </Button>
         ) : (
           <Button
             round
@@ -100,9 +98,8 @@ const ReportModal = ({
             size="smaller"
             ariaLabel={lang('Close')}
             onClick={handleCloseClick}
-          >
+            iconName="close"
-            <Icon name="close" />
+          />
-          </Button>
         )}
         <div className={buildClassName('modal-title', styles.modalTitle, hasSubtitle && styles.titleMultiline)}>
           <h3 className={buildClassName(styles.title, renderingDepth && styles.hasDepth)}>

src/components/modals/stars/StarsBalanceModal.tsx

@@ -312,12 +312,10 @@ const StarsBalanceModal = ({
           size="smaller"
           className={styles.closeButton}
           color="translucent"
-
           onClick={() => closeStarsBalanceModal()}
           ariaLabel={lang('Close')}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
         {currency !== TON_CURRENCY_CODE && <BalanceBlock balance={balance} className={styles.modalBalance} />}
         <div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}>
           <h2 className={styles.starHeaderText}>

src/components/modals/stars/gift/StarsGiftModal.tsx

@@ -24,7 +24,6 @@ import useLastCallback from '../../../../hooks/useLastCallback';
 import useOldLang from '../../../../hooks/useOldLang';
 
 import Avatar from '../../../common/Avatar';
-import Icon from '../../../common/icons/Icon';
 import SafeLink from '../../../common/SafeLink';
 import Button from '../../../ui/Button';
 import Modal from '../../../ui/Modal';
@@ -162,12 +161,10 @@ const StarsGiftModal: FC<OwnProps & StateProps> = ({
           size="smaller"
           className={styles.closeButton}
           color="translucent"
-
           onClick={() => closeStarsGiftModal()}
           ariaLabel={oldLang('Close')}
-        >
+          iconName="close"
-          <Icon name="close" />
+        />
-        </Button>
         <div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}>
           <h2 className={styles.starHeaderText}>
             {user ? oldLang('GiftStarsTitle') : oldLang('Star.List.GetStars')}

src/components/modals/webApp/MinimizedWebAppModal.tsx

@@ -16,7 +16,6 @@ import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
 import AvatarList from '../../common/AvatarList';
-import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 
 import styles from './MinimizedWebAppModal.module.scss';
@@ -97,11 +96,11 @@ const MinimizedWebAppModal = ({
         round
         color="translucent"
         size="tiny"
+        iconName="close"
+        iconClassName={styles.icon}
         ariaLabel={oldLang('Close')}
         onClick={handleCloseClick}
-      >
+      />
-        <Icon className={styles.icon} name="close" />
-      </Button>
       <AvatarList className={styles.avatars} size="mini" peers={peers} />
       {renderTitle()}
       <Button
@@ -112,10 +111,10 @@ const MinimizedWebAppModal = ({
         round
         color="translucent"
         size="tiny"
+        iconName="expand-modal"
+        iconClassName={styles.stateIcon}
         onClick={handleExpandClick}
-      >
+      />
-        <Icon className={styles.stateIcon} name="expand-modal" />
-      </Button>
     </div>
   );
 };

src/components/modals/webApp/WebAppModal.tsx

@@ -350,9 +350,8 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
         color="translucent"
         onClick={onTrigger}
         ariaLabel="More actions"
-      >
+        iconName="more"
-        <Icon name="more" />
+      />
-      </Button>
     );
   }, [isMobile, supportMultiTabMode]);
 
@@ -479,11 +478,11 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
             round
             color="translucent"
             size="tiny"
+            iconName="close"
+            iconClassName={styles.tabCloseIcon}
             ariaLabel={oldLang('Close')}
             onClick={handleTabClose}
-          >
+          />
-            <Icon className={styles.tabCloseIcon} name="close" />
-          </Button>
         </div>
         {renderTabCurveBorder(styles.tabButtonRightCurve)}
       </div>
@@ -509,11 +508,11 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
             round
             color="translucent"
             size="tiny"
+            iconName="close"
+            iconClassName={styles.tabCloseIcon}
             ariaLabel={oldLang('Close')}
             onClick={handleCloseMoreAppsTab}
-          >
+          />
-            <Icon className={styles.tabCloseIcon} name="close" />
-          </Button>
         </div>
         {renderTabCurveBorder(styles.tabButtonRightCurve)}
       </div>
@@ -531,9 +530,9 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
         color="translucent"
         size="tiny"
         onClick={handleOpenMoreAppsTabClick}
-      >
+        iconName="add"
-        <Icon className={styles.icon} name="add" />
+        iconClassName={styles.icon}
-      </Button>
+      />
     );
   }
 
@@ -614,9 +613,9 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
               color="translucent"
               size="tiny"
               onClick={handleFullscreenClick}
-            >
+              iconName="expand-modal"
-              <Icon className={styles.stateIcon} name="expand-modal" />
+              iconClassName={styles.stateIcon}
-            </Button>
+            />
           )}
 
           <Button
@@ -628,9 +627,9 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
             color="translucent"
             size="tiny"
             onClick={handleCollapseClick}
-          >
+            iconClassName={styles.stateIcon}
-            <Icon className={styles.stateIcon} name="collapse-modal" />
+            iconName="collapse-modal"
-          </Button>
+          />
         </div>
       </div>
     );

src/components/payment/PaymentModal.tsx

@@ -27,7 +27,6 @@ import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
 import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import Modal from '../ui/Modal';
 import Spinner from '../ui/Spinner';
@@ -567,11 +566,10 @@ const PaymentModal: FC<OwnProps & StateProps> = ({
           color="translucent"
           round
           size="smaller"
+          iconName={step === PaymentStep.Checkout ? 'close' : 'arrow-left'}
           onClick={step === PaymentStep.Checkout ? closeModal : handleBackClick}
           ariaLabel={lang('Close')}
-        >
+        />
-          <Icon name={step === PaymentStep.Checkout ? 'close' : 'arrow-left'} />
-        </Button>
         <h3>{modalHeader}</h3>
       </div>
       {step !== undefined ? (

src/components/payment/ReceiptModal.tsx

@@ -10,7 +10,6 @@ import useFlag from '../../hooks/useFlag';
 import useLang from '../../hooks/useLang';
 import usePrevious from '../../hooks/usePrevious';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import Modal from '../ui/Modal';
 import Checkout from './Checkout';
@@ -66,9 +65,8 @@ const ReceiptModal: FC<OwnProps & StateProps> = ({
               size="smaller"
               onClick={closeModal}
               ariaLabel="Close"
-            >
+              iconName="close"
-              <Icon name="close" />
+            />
-            </Button>
             <h3>
               {' '}
               {lang('PaymentReceipt')}

src/components/right/Profile.scss

@@ -216,10 +216,6 @@
         border-radius: var(--border-radius-default-small);
 
         box-shadow: -1rem 0 1rem 1rem var(--color-background), -1rem 0 1rem 0.3125rem var(--color-background);
-
-        .icon {
-          margin-left: 0.625rem;
-        }
       }
 
       .more-similar {

src/components/right/Profile.tsx

@@ -102,7 +102,6 @@ import Audio from '../common/Audio';
 import Document from '../common/Document';
 import SavedGift from '../common/gift/SavedGift';
 import GroupChatInfo from '../common/GroupChatInfo';
-import Icon from '../common/icons/Icon';
 import Media from '../common/Media';
 import NothingFound from '../common/NothingFound';
 import PreviewMedia from '../common/PreviewMedia';
@@ -1022,10 +1021,13 @@ const Profile = ({
             ))}
             {!isCurrentUserPremium && (
               <>
-                {}
+                <Button
-                <Button className="show-more-channels" onClick={() => openPremiumModal()}>
+                  className="show-more-channels"
+                  onClick={() => openPremiumModal()}
+                  iconName="unlock-badge"
+                  iconAlignment="end"
+                >
                   {oldLang('UnlockSimilar')}
-                  <Icon name="unlock-badge" />
                 </Button>
                 <div className="more-similar">
                   {renderText(oldLang('MoreSimilarText', limitSimilarPeers), ['simple_markdown'])}
@@ -1054,10 +1056,8 @@ const Profile = ({
             ))}
             {!isCurrentUserPremium && (
               <>
-                {}
+                <Button className="show-more-bots" onClick={() => openPremiumModal()} iconName="unlock-badge">
-                <Button className="show-more-bots" onClick={() => openPremiumModal()}>
                   {lang('UnlockMoreSimilarBots')}
-                  <Icon name="unlock-badge" />
                 </Button>
                 <div className="more-similar">
                   {renderText(lang('MoreSimilarBotsDescription', { count: limitSimilarPeers }, {

src/components/right/RightHeader.tsx

@@ -40,7 +40,6 @@ import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import ConfirmDialog from '../ui/ConfirmDialog';
 import DropdownMenu from '../ui/DropdownMenu';
@@ -385,9 +384,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
         className={isOpen ? 'active' : ''}
         onClick={onTrigger}
         ariaLabel={lang('AriaLabelOpenMenu')}
-      >
+        iconName="more"
-        <Icon name="more" />
+      />
-      </Button>
     );
   }, [isMobile, lang]);
 
@@ -441,9 +439,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                   size="smaller"
                   ariaLabel={oldLang('Edit')}
                   onClick={handleEditInviteClick}
-                >
+                  iconName="edit"
-                  <Icon name="edit" />
+                />
-                </Button>
               )}
               {currentInviteInfo && currentInviteInfo.isRevoked && (
                 <>
@@ -453,9 +450,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                     size="smaller"
                     ariaLabel={oldLang('Delete')}
                     onClick={openDeleteDialog}
-                  >
+                    iconName="delete"
-                    <Icon name="delete" />
+                  />
-                  </Button>
                   <ConfirmDialog
                     isOpen={isDeleteDialogOpen}
                     onClose={closeDeleteDialog}
@@ -636,9 +632,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                   size="smaller"
                   ariaLabel={oldLang('AddContact')}
                   onClick={handleAddContact}
-                >
+                  iconName="add-user"
-                  <Icon name="add-user" />
+                />
-                </Button>
               )}
               {canManage && !isInsideTopic && (
                 <Button
@@ -647,9 +642,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                   size="smaller"
                   ariaLabel={oldLang('Edit')}
                   onClick={handleToggleManagement}
-                >
+                  iconName="edit"
-                  <Icon name="edit" />
+                />
-                </Button>
               )}
               {canEditBot && (
                 <Button
@@ -658,9 +652,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                   size="smaller"
                   ariaLabel={oldLang('Edit')}
                   onClick={handleToggleManagement}
-                >
+                  iconName="edit"
-                  <Icon name="edit" />
+                />
-                </Button>
               )}
               {canEditTopic && (
                 <Button
@@ -669,9 +662,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                   size="smaller"
                   ariaLabel={oldLang('EditTopic')}
                   onClick={toggleEditTopic}
-                >
+                  iconName="edit"
-                  <Icon name="edit" />
+                />
-                </Button>
               )}
               {canViewStatistics && (
                 <Button
@@ -680,9 +672,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                   size="smaller"
                   ariaLabel={oldLang('Statistics')}
                   onClick={handleToggleStatistics}
-                >
+                  iconName="stats"
-                  <Icon name="stats" />
+                />
-                </Button>
               )}
               {isOwnProfile && (
                 <Button
@@ -691,9 +682,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
                   size="smaller"
                   ariaLabel={lang('Edit')}
                   onClick={handleEditProfile}
-                >
+                  iconName="edit"
-                  <Icon name="edit" />
+                />
-                </Button>
               )}
             </section>
           </>

src/components/story/Story.tsx

@@ -572,9 +572,8 @@ function Story({
           onClick={onTrigger}
           className={buildClassName(styles.button, isOpen && 'active')}
           ariaLabel={lang('AriaLabelOpenMenu')}
-        >
+          iconName="more"
-          <Icon name="more" />
+        />
-        </Button>
       );
     };
   }, [isMobile, lang]);
@@ -716,9 +715,8 @@ function Story({
               disabled={!hasFullData}
               onClick={handleVolumeMuted}
               ariaLabel={oldLang('Volume')}
-            >
+              iconName={(isMuted || noSound) ? 'speaker-muted-story' : 'speaker-story'}
-              <Icon name={(isMuted || noSound) ? 'speaker-muted-story' : 'speaker-story'} />
+            />
-            </Button>
           )}
           <DropdownMenu
             className={styles.buttonMenu}
@@ -766,9 +764,8 @@ function Story({
             color="translucent-white"
             ariaLabel={oldLang('Close')}
             onClick={onClose}
-          >
+            iconName="close"
-            <Icon name="close" />
+          />
-          </Button>
         </div>
       </div>
     );

src/components/story/StoryFooter.tsx

@@ -126,9 +126,8 @@ const StoryFooter = ({
           onClick={handleForwardClick}
           ariaLabel={lang('Forward')}
           className={styles.footerItem}
-        >
+          iconName="forward"
-          <Icon name="forward" />
+        />
-        </Button>
       )}
       {isChannel && (
         <>
@@ -140,9 +139,8 @@ const StoryFooter = ({
                 size="smaller"
                 nonInteractive
                 ariaLabel={lang('PublicShares')}
-              >
+                iconName="loop"
-                <Icon name="loop" />
+              />
-              </Button>
               <span>{forwardsCount}</span>
             </div>
           )}

src/components/story/StoryViewer.tsx

@@ -26,7 +26,6 @@ import { dispatchPriorityPlaybackEvent } from '../../hooks/usePriorityPlaybackCh
 import useSlideSizes from './hooks/useSlideSizes';
 import useStoryProps from './hooks/useStoryProps';
 
-import Icon from '../common/icons/Icon';
 import Button from '../ui/Button';
 import ShowTransition from '../ui/ShowTransition';
 import StoryDeleteConfirmModal from './StoryDeleteConfirmModal';
@@ -156,9 +155,8 @@ function StoryViewer({
         color="translucent-white"
         ariaLabel={lang('Close')}
         onClick={handleClose}
-      >
+        iconName="close"
-        <Icon name="close" />
+      />
-      </Button>
 
       <StorySlides
         isOpen={isOpen}

src/components/ui/Button.scss

@@ -502,6 +502,7 @@
 
   .with-icon-start {
     display: flex;
+    align-items: center;
     .icon {
       margin-inline-end: 0.25rem;
     }
@@ -510,6 +511,7 @@
   .with-icon-end {
     display: flex;
     flex-direction: row-reverse;
+    align-items: center;
 
     .icon {
       margin-inline-start: 0.25rem;

src/components/ui/Button.tsx

@@ -22,7 +22,7 @@ import './Button.scss';
 export type OwnProps = {
   ref?: ElementRef<HTMLButtonElement | HTMLAnchorElement>;
   type?: 'button' | 'submit' | 'reset';
-  children: React.ReactNode;
+  children?: React.ReactNode;
   size?: 'default' | 'smaller' | 'tiny';
   color?: (
     'primary' | 'secondary' | 'gray' | 'danger' | 'translucent' | 'translucent-white' | 'translucent-black'
@@ -160,7 +160,7 @@ const Button: FC<OwnProps> = ({
     isRectangular && 'rectangular',
     noForcedUpperCase && 'no-upper-case',
     inline && 'inline',
-    iconAlignment && iconName && `content-with-icon-${iconAlignment}`,
+    Boolean(iconName && children) && `content-with-icon-${iconAlignment}`,
   );
 
   const handleClick = useLastCallback((e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -209,6 +209,10 @@ const Button: FC<OwnProps> = ({
       return children;
     }
 
+    if (!children) {
+      return icon;
+    }
+
     return (
       <div className={`with-icon-${iconAlignment}`}>
         {icon}

src/components/ui/DropdownMenu.tsx

@@ -4,7 +4,6 @@ import {
   useCallback, useMemo, useRef, useState,
 } from '../../lib/teact/teact';
 
-import Icon from '../common/icons/Icon';
 import Button from './Button';
 import Menu from './Menu';
 
@@ -89,11 +88,10 @@ const DropdownMenu: FC<OwnProps> = ({
         size="smaller"
         color="translucent"
         className={isMenuOpen ? 'active' : ''}
+        iconName="more"
         onClick={onTrigger}
         ariaLabel="More actions"
-      >
+      />
-        <Icon name="more" />
-      </Button>
     );
   }, [trigger]);
 

src/components/ui/ImageCropper.tsx

@@ -9,7 +9,6 @@ import { REM } from '../common/helpers/mediaDimensions';
 import useLastCallback from '../../hooks/useLastCallback';
 import useWindowSize from '../../hooks/window/useWindowSize';
 
-import Icon from '../common/icons/Icon';
 import Button from './Button';
 import RangeSlider from './RangeSlider';
 
@@ -201,9 +200,14 @@ const ImageCropper = ({
           value={zoom}
           onChange={handleZoomChange}
         />
-        <Button className={styles.confirmButton} round color="primary" onClick={handleCrop} ariaLabel="Crop">
+        <Button
-          <Icon name="check" />
+          className={styles.confirmButton}
-        </Button>
+          round
+          color="primary"
+          iconName="check"
+          onClick={handleCrop}
+          ariaLabel="Crop"
+        />
       </div>
     </div>
   );

src/components/ui/ListItem.tsx

@@ -264,9 +264,8 @@ const ListItem = ({
             size="smaller"
             onClick={handleSecondaryIconClick}
             onMouseDown={handleSecondaryIconMouseDown}
-          >
+            iconName={secondaryIcon}
-            <Icon name={secondaryIcon} />
+          />
-          </Button>
         )}
         {rightElement}
       </ButtonElementTag>

src/components/ui/Modal.tsx

@@ -16,7 +16,6 @@ import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps
 import useOldLang from '../../hooks/useOldLang';
 import useShowTransition from '../../hooks/useShowTransition';
 
-import Icon from '../common/icons/Icon';
 import Button, { type OwnProps as ButtonProps } from './Button';
 import ModalStarBalanceBar from './ModalStarBalanceBar';
 import Portal from './Portal';
@@ -151,11 +150,10 @@ const Modal: FC<OwnProps> = ({
         round
         color={absoluteCloseButtonColor}
         size="smaller"
+        iconName="close"
         ariaLabel={lang('Close')}
         onClick={onClose}
-      >
+      />
-        <Icon name="close" />
-      </Button>
     ) : undefined;
 
     return title ? (

src/components/ui/SearchInput.tsx

@@ -198,24 +198,22 @@ const SearchInput: FC<OwnProps> = ({
           round
           size="tiny"
           color="translucent"
+          iconName="up"
           onClick={onUpClick}
           disabled={!onUpClick}
           ariaLabel={lang('AriaSearchOlderResult')}
-        >
+        />
-          <Icon name="up" />
-        </Button>
       )}
       {hasDownButton && (
         <Button
           round
           size="tiny"
           color="translucent"
+          iconName="down"
           onClick={onDownClick}
           disabled={!onDownClick}
           ariaLabel={lang('AriaSearchNewerResult')}
-        >
+        />
-          <Icon name="down" />
-        </Button>
       )}
       <Transition
         name="fade"
@@ -232,10 +230,9 @@ const SearchInput: FC<OwnProps> = ({
               round
               size="tiny"
               color="translucent"
+              iconName="close"
               onClick={onReset}
-            >
+            />
-              <Icon name="close" />
-            </Button>
           )
         )}
       </Transition>

src/components/ui/ShowMoreButton.tsx

@@ -2,7 +2,6 @@ import type { FC } from '../../lib/teact/teact';
 
 import useOldLang from '../../hooks/useOldLang';
 
-import Icon from '../common/icons/Icon';
 import Button from './Button';
 
 import './ShowMoreButton.scss';
@@ -32,8 +31,8 @@ const ShowMoreButton: FC<OwnProps> = ({
       isLoading={isLoading}
       isRtl={lang.isRtl}
       onClick={onClick}
+      iconName="down"
     >
-      <Icon name="down" />
       Show
       {' '}
       {count}