diff --git a/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx b/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx
index 661bb2250e..be3149a2cd 100644
--- a/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx
+++ b/bundles/admin/admin-layeranalytics/LayerAnalyticsList.jsx
@@ -2,8 +2,8 @@ import React, { Fragment, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Table, getSorterFor } from 'oskari-ui/components/Table';
 import { Message, Space, Spin, Tooltip, TextInput, Select, Option, Button } from 'oskari-ui';
-import { DeleteButton, SecondaryButton } from 'oskari-ui/components/buttons';
-import { EditOutlined, SearchOutlined } from '@ant-design/icons';
+import { DeleteButton, SecondaryButton, IconButton } from 'oskari-ui/components/buttons';
+import { SearchOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { ThemeConsumer } from 'oskari-ui/util';
 
@@ -204,9 +204,9 @@ export const LayerAnalyticsList = ThemeConsumer(({ theme, analyticsData, isLoadi
                     <React.Fragment>
                         <TitleArea>
                             <Space>
-                                <Tooltip title={ <Message messageKey='flyout.editLayerTooltip' /> }>
-                                    <EditOutlined onClick={ () => layerEditorCallback(item.id) } />
-                                </Tooltip>
+                                <IconButton type='edit'
+                                    title={ <Message messageKey='flyout.editLayerTooltip' /> }
+                                    onClick={ () => layerEditorCallback(item.id) } />
                                 <DeleteButton
                                     type='icon'
                                     title={<Message messageKey='flyout.removeAllDataForLayer' />}
diff --git a/bundles/framework/announcements/view/flyout/CollapseTools.jsx b/bundles/framework/announcements/view/flyout/CollapseTools.jsx
index d04cf27b3f..ee0034785f 100644
--- a/bundles/framework/announcements/view/flyout/CollapseTools.jsx
+++ b/bundles/framework/announcements/view/flyout/CollapseTools.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { DeleteButton } from 'oskari-ui/components/buttons';
-import { Tooltip, Message } from 'oskari-ui';
-import { EditOutlined, EyeOutlined } from '@ant-design/icons';
+import { DeleteButton, IconButton } from 'oskari-ui/components/buttons';
+import { Message } from 'oskari-ui';
+import { EyeOutlined } from '@ant-design/icons';
 
 const ToolRow = styled.div`
     margin-left: 10px;
@@ -22,14 +22,17 @@ export const CollapseTools = ({ announcementId, toolController }) => {
     return (
         <ToolRow onClick={(event) => event.stopPropagation()}>
             <StyledTool>
-                <Tooltip title={<Message messageKey={'tools.preview'}/>}>
-                    <EyeOutlined className='t_button-preview' onClick = { () => toolController.preview(announcementId) }/>
-                </Tooltip>
+                <IconButton
+                    className='t_preview'
+                    icon={<EyeOutlined/>}
+                    title={<Message messageKey={'tools.preview'}/>}
+                    onClick = { () => toolController.preview(announcementId) }/>
             </StyledTool>
             <StyledTool>
-                <Tooltip title={<Message messageKey={'tools.edit'}/>}>
-                    <EditOutlined className='t_button-edit' onClick = { () => toolController.showEditPopup(announcementId) }/>
-                </Tooltip>
+                <IconButton
+                    type='edit'
+                    title={<Message messageKey={'tools.edit'}/>}
+                    onClick = { () => toolController.showEditPopup(announcementId) }/>
             </StyledTool>
             <StyledTool>
                 <DeleteButton
diff --git a/bundles/framework/myplaces3/MyPlacesLayerControls.jsx b/bundles/framework/myplaces3/MyPlacesLayerControls.jsx
index 7d4bcecc0c..0a655c91de 100644
--- a/bundles/framework/myplaces3/MyPlacesLayerControls.jsx
+++ b/bundles/framework/myplaces3/MyPlacesLayerControls.jsx
@@ -7,9 +7,6 @@ import { SecondaryButton, ButtonContainer, DeleteButton, IconButton } from 'oska
 import { PlusCircleOutlined, ExportOutlined } from '@ant-design/icons';
 import { green } from '@ant-design/colors';
 
-const AddIcon = styled(PlusCircleOutlined)`
-    color: ${green.primary}
-`;
 const StyledControls = styled('div')`
     display: flex;
     width: 100%;
@@ -122,7 +119,8 @@ export const MyPlacesLayerControls = (props) => {
                 <StyledActions className='t_layer'>
                     <IconButton
                         bordered={true}
-                        icon={<AddIcon />}
+                        icon={<PlusCircleOutlined />}
+                        color={green.primary}
                         title={<Message messageKey='tab.addCategory' />}
                         className='t_add'
                         onClick={() => controller.openLayerDialog()}
diff --git a/bundles/framework/oskariui/resources/locale/en.js b/bundles/framework/oskariui/resources/locale/en.js
index dc0fe460c7..b73b1ca4be 100644
--- a/bundles/framework/oskariui/resources/locale/en.js
+++ b/bundles/framework/oskariui/resources/locale/en.js
@@ -19,7 +19,10 @@ Oskari.registerLocalization({
             search: 'Search',
             reset: 'Reset',
             copy: 'Copy to clipboard',
-            clear: 'Clear'
+            clear: 'Clear',
+            accept: 'Accept',
+            reject: 'Reject',
+            info: 'Show more information'
         },
         messages: {
             confirm: 'Are you sure you want to continue?',
diff --git a/bundles/framework/oskariui/resources/locale/fi.js b/bundles/framework/oskariui/resources/locale/fi.js
index 724e2efc75..7d9d6a0dd8 100644
--- a/bundles/framework/oskariui/resources/locale/fi.js
+++ b/bundles/framework/oskariui/resources/locale/fi.js
@@ -19,7 +19,10 @@ Oskari.registerLocalization({
             search: 'Etsi',
             reset: 'Tyhjennä',
             copy: 'Kopioi leikepöydälle',
-            clear: 'Tyhjennä'
+            clear: 'Tyhjennä',
+            accept: 'Hyväksy',
+            reject: 'Hylkää',
+            info: 'Näytä lisätietoa'
         },
         messages: {
             confirm: 'Haluatko varmasti jatkaa?',
diff --git a/bundles/framework/oskariui/resources/locale/fr.js b/bundles/framework/oskariui/resources/locale/fr.js
index 8f1b429c3e..def3e05c69 100644
--- a/bundles/framework/oskariui/resources/locale/fr.js
+++ b/bundles/framework/oskariui/resources/locale/fr.js
@@ -13,7 +13,15 @@ Oskari.registerLocalization({
             yes: 'Oui',
             no: 'Non',
             next: 'Suivant',
-            previous: 'Précédent'
+            previous: 'Précédent',
+            print: 'Imprimer',
+            search: 'Recherche',
+            reset: 'Effacer',
+            copy: 'Copier dans le presse-papier',
+            clear: 'Effacer',
+            accept: 'Accepter',
+            reject: 'Refuser',
+            info: 'Afficher plus d\'informations'
         },
         table: {
             sort: {
diff --git a/bundles/framework/oskariui/resources/locale/is.js b/bundles/framework/oskariui/resources/locale/is.js
index c6f07bf82f..79fb0b84b6 100644
--- a/bundles/framework/oskariui/resources/locale/is.js
+++ b/bundles/framework/oskariui/resources/locale/is.js
@@ -13,7 +13,15 @@ Oskari.registerLocalization({
             yes: 'Já',
             no: 'Nei',
             next: 'Næst',
-            previous: 'Fyrri'
+            previous: 'Fyrri',
+            print: 'Prenta',
+            search: 'Leita',
+            reset: 'Hreinsa',
+            copy: 'Afrita á klemmuspjald',
+            clear: 'Hreinsa',
+            accept: 'Samþykkja',
+            reject: 'Hafna',
+            info: 'Sýna frekari upplýsingar'
         },
         messages: {
             confirmDelete: 'Viss um að eyða?'
diff --git a/bundles/framework/oskariui/resources/locale/ru.js b/bundles/framework/oskariui/resources/locale/ru.js
index 15a9e184bd..07c5038ced 100644
--- a/bundles/framework/oskariui/resources/locale/ru.js
+++ b/bundles/framework/oskariui/resources/locale/ru.js
@@ -12,7 +12,15 @@ Oskari.registerLocalization({
             yes: 'Да',
             no: 'Нет',
             next: 'Следующий',
-            previous: 'Предыдущий'
+            previous: 'Предыдущий',
+            print: 'Распечатать',
+            search: 'Поиск',
+            reset: 'Очистить',
+            copy: 'Скопировать в буфер обмена',
+            clear: 'Очистить',
+            accept: 'Принять',
+            reject: 'Отклонить',
+            info: 'Показать больше информации'
         },
         table: {
             sort: {
diff --git a/bundles/framework/oskariui/resources/locale/sv.js b/bundles/framework/oskariui/resources/locale/sv.js
index fb4c2dcb21..61e9b3c328 100644
--- a/bundles/framework/oskariui/resources/locale/sv.js
+++ b/bundles/framework/oskariui/resources/locale/sv.js
@@ -19,7 +19,10 @@ Oskari.registerLocalization({
             search: 'Sök',
             reset: 'Återställa',
             copy: 'Kopiera till klippbordet',
-            clear: 'Rensa'
+            clear: 'Rensa',
+            accept: 'Acceptera',
+            reject: 'Avvisa',
+            info: 'Visa mera information'
         },
         messages: {
             confirm: 'Är du säker på att du vill fortsätta?',
diff --git a/src/react/components/buttons/DeleteButton.jsx b/src/react/components/buttons/DeleteButton.jsx
index b2a61d3450..ad16df840a 100644
--- a/src/react/components/buttons/DeleteButton.jsx
+++ b/src/react/components/buttons/DeleteButton.jsx
@@ -1,15 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Message, Confirm, Button,Tooltip } from 'oskari-ui';
-import { IconButton } from 'oskari-ui/components/buttons';
-import { SecondaryButton } from './';
-import { DeleteIcon } from '../icons'
+import { Message, Confirm, Tooltip } from 'oskari-ui';
+import { SecondaryButton, IconButton } from './';
 
-const StyledButton = styled(Button)`
-    font-size: 16px;
-    pointer-events: ${props => props.disabled ? 'none' : 'auto'};
-`;
 /**
  * This + pointer-events style on button components are used to fix tooltip
  * not disappearing if the button is disabled. Probably caused by styled-components + antd problem.
@@ -21,16 +15,22 @@ const DisabledWrapper = styled('div')`
 const getButton = (type, disabled) => {
     const props = {
         className: 't_button t_delete',
-        disabled
-    }
+        disabled,
+        type: 'delete',
+        title: null
+    };
     if (type === 'icon') {
-        return <IconButton icon={<DeleteIcon/>} {...props}/>;
+        return <IconButton {...props}/>;
     }
     if (type === 'button') {
-        return <StyledButton {...props}><DeleteIcon/></StyledButton>;
+        return <IconButton bordered {...props}/>;
     }
     if (type === 'label') {
-        return <SecondaryButton {...props} danger type="delete"/>;
+        return (
+            <DisabledWrapper>
+                <SecondaryButton danger {...props}/>;
+            </DisabledWrapper>
+        );
     }
 };
 
@@ -55,9 +55,7 @@ export const DeleteButton = ({
             okType='danger'
             placement={placement}>
             <Tooltip title={tooltip}>
-                <DisabledWrapper $disabled={disabled}>
-                    {getButton(type, disabled)}
-                </DisabledWrapper>
+                {getButton(type, disabled)}
             </Tooltip>
         </Confirm>
     );
diff --git a/src/react/components/buttons/IconButton.jsx b/src/react/components/buttons/IconButton.jsx
index 7a3784b2a6..a5aa89c036 100644
--- a/src/react/components/buttons/IconButton.jsx
+++ b/src/react/components/buttons/IconButton.jsx
@@ -5,21 +5,35 @@ import { ThemeConsumer } from '../../util';
 import { getColorEffect, EFFECT } from '../../theme';
 import styled from 'styled-components';
 import { PlusOutlined, EditOutlined, QuestionCircleOutlined, DeleteOutlined, CheckOutlined, StopOutlined} from '@ant-design/icons';
-import { red, green } from '@ant-design/colors'
 import { Forward } from '../icons/Forward'
 import { Backward } from '../icons/Backward'
 
+const COLORS = {
+    red: '#f5222d',
+    green: '#52c41a',
+    blue: '#0290ff',
+    hover: '#ffd400'
+};
+
+const TYPE_COLORS = {
+    accept: COLORS.green,
+    reject: COLORS.red,
+    delete: COLORS.red,
+    info: COLORS.blue
+};
+
 // Note! AntD buttons default at 32x32px
 //  If the font-size of the icon is > 32px it will be clipped by at least Safari
 //  Let the user of this component define the size of the button instead of doing it here.
 const BorderlessButton = styled(Button)`
+    color:  ${props => props.$active || props.$color};
     border: none;
     background: none;
     padding: 0px;
     pointer-events: ${props => props.disabled ? 'none' : 'auto'};
     font-size: ${props => props.$iconSize}px;
     &:hover {
-        color: ${props => props.color};
+        color: ${props => props.$hover};
         background: none;
     }
     &:disabled {
@@ -27,11 +41,13 @@ const BorderlessButton = styled(Button)`
     }
 `;
 const BorderedButton = styled(Button)`
+    color:  ${props => props.$active || props.$color};
     pointer-events: ${props => props.disabled ? 'none' : 'auto'};
     font-size: ${props => props.$iconSize}px;
+    border-color: ${props => props.$active};
     &:hover {
-        color: ${props => props.color};
-        border-color: ${props => props.color};
+        color: ${props => props.$hover};
+        border-color: ${props => props.$hover};
     }
 `;
 
@@ -45,10 +61,10 @@ const DisabledWrapper = styled('div')`
 
 const getPredefinedIcon = (type) => {
     if (type === 'accept') {
-        return <CheckOutlined style={{color: green.primary}}/>;
+        return <CheckOutlined />;
     }
     if (type === 'reject') {
-        return <StopOutlined style={{color: red.primary}} />;
+        return <StopOutlined />;
     }
     if (type === 'add') {
         return <PlusOutlined/>;
@@ -57,7 +73,7 @@ const getPredefinedIcon = (type) => {
         return <EditOutlined/>;
     }
     if (type === 'info') {
-        return <QuestionCircleOutlined style={{ color: '#0290ff', borderRadius: '50%' }}/>;
+        return <QuestionCircleOutlined />;
     }
     if (type === 'next') {
         return <Forward/>;
@@ -66,7 +82,7 @@ const getPredefinedIcon = (type) => {
         return <Backward/>;
     }
     if (type === 'delete') {
-        return <DeleteOutlined style={{color: red.primary}} />
+        return <DeleteOutlined />
     }
     return null;
 }
@@ -87,31 +103,45 @@ const getConfirmProps = (type) => {
     };
 };
 
-const ThemeButton = ThemeConsumer(({ theme, bordered, iconSize, ...rest }) => {
-    let color = theme?.color?.accent;
-    if (color && Oskari.util.isDarkColor(color)) {
-        color = theme?.color?.primary;
+const ThemeButton = ThemeConsumer(({
+    theme,
+    type,
+    bordered = false,
+    disabled = false,
+    icon = type ? getPredefinedIcon(type) : null,
+    iconSize = 16,
+    color = TYPE_COLORS[type],
+    className = '',
+    active = false,
+    ...rest
+}) => {
+    if (type && !className.includes(`t_${type}`)) {
+        className = `${className} t_${type}`;
     }
-    if (!color) {
-        color = '#ffd400';
-    } else if (Oskari.util.isDarkColor(color)) {
-        color = getColorEffect(color, EFFECT.LIGHTEN);
+    let hover = theme?.color?.accent;
+    if (hover && Oskari.util.isDarkColor(hover)) {
+        hover = theme?.color?.primary;
     }
-    if (bordered) {
-        return <BorderedButton color={color} $iconSize={iconSize} { ...rest }/>
+    if (!hover) {
+        hover = COLORS.hover;
+    } else if (Oskari.util.isDarkColor(hover)) {
+        hover = getColorEffect(hover, EFFECT.LIGHTEN);
     }
-    // default
-    return <BorderlessButton color={color} $iconSize={iconSize} { ...rest }/>
+    const ButtonNode = bordered ? BorderedButton : BorderlessButton;
+    const activeColor = active ? hover : null;
+    return (
+        <DisabledWrapper $disabled={disabled}>
+            <ButtonNode $hover={hover} $color={color} $active={activeColor} $iconSize={iconSize} disabled={disabled} className={className} { ...rest }>
+                {icon}
+            </ButtonNode>
+        </DisabledWrapper>
+    );
 });
 
 export const IconButton = ({
     type,
     title = type ? <Message messageKey={`buttons.${type}`} bundleKey='oskariui'/> : '',
-    icon = type ? getPredefinedIcon(type) : null,
-    onClick,
     onConfirm,
-    disabled = false,
-    iconSize = 16,
     ...rest
 }) => {
     if (onConfirm) {
@@ -121,15 +151,11 @@ export const IconButton = ({
                 onConfirm={onConfirm}
                 okButtonProps={{className: `t_button t_${type || 'ok'}`}}
                 cancelButtonProps={{className: 't_button t_cancel'}}
-                disabled={disabled}
+                disabled={rest.disabled === true}
                 placement={title ? 'bottom' : 'top'}
                 { ...getConfirmProps(type) }>
                     <Tooltip title={title}>
-                        <DisabledWrapper $disabled={disabled}>
-                            <ThemeButton disabled={disabled} iconSize={iconSize} onClick={onClick} { ...rest }>
-                                {icon}
-                            </ThemeButton>
-                        </DisabledWrapper>
+                        <ThemeButton type={type} { ...rest }/>
                     </Tooltip>
             </Confirm>
         );
@@ -137,20 +163,11 @@ export const IconButton = ({
     if (title) {
         return (
             <Tooltip title={title}>
-                <DisabledWrapper $disabled={disabled}>
-                    <ThemeButton disabled={disabled} iconSize={iconSize} onClick={onClick} { ...rest }>
-                        {icon}
-                    </ThemeButton>
-                </DisabledWrapper>
+                <ThemeButton type={type} { ...rest }/>
             </Tooltip>
         );
     }
-    return (
-        <ThemeButton onClick={onClick} iconSize={iconSize} { ...rest }>
-            {icon}
-        </ThemeButton>
-    );
-
+    return <ThemeButton type={type} { ...rest }/>;
 };
 
 IconButton.propTypes = {
@@ -158,5 +175,9 @@ IconButton.propTypes = {
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
     onClick: PropTypes.func,
-    onConfirm: PropTypes.func
+    onConfirm: PropTypes.func,
+    disabled: PropTypes.bool,
+    color: PropTypes.string,
+    iconSize: PropTypes.number,
+    active: PropTypes.bool
 };
diff --git a/src/react/components/icons/Delete.jsx b/src/react/components/icons/Delete.jsx
deleted file mode 100644
index 5a9371b081..0000000000
--- a/src/react/components/icons/Delete.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-
-import styled from 'styled-components';
-import { red } from '@ant-design/colors'
-import { getColorEffect, EFFECT } from '../../theme';
-import { DeleteOutlined } from '@ant-design/icons';
-
-export const Delete = styled(DeleteOutlined)`
-    color: ${red.primary};
-    cursor: pointer;
-    &:hover {
-        color: ${getColorEffect(red.primary, EFFECT.AUTO)};
-    }
-`;
diff --git a/src/react/components/icons/index.js b/src/react/components/icons/index.js
index 6df8109e75..2b7ad0ebca 100644
--- a/src/react/components/icons/index.js
+++ b/src/react/components/icons/index.js
@@ -1,7 +1,6 @@
 export { Mandatory as MandatoryIcon } from './Mandatory';
 export { Info as InfoIcon } from './Info';
 export { Metadata as MetadataIcon } from './Metadata';
-export { Delete as DeleteIcon } from './Delete';
 export { Return as ReturnIcon } from './Return';
 export { Forward as ForwardIcon } from './Forward';
 export { Backward as BackwardIcon } from './Backward';