diff --git a/css/modals/security/_security.scss b/css/modals/security/_security.scss
index 50f22997e1..2543dac5d3 100644
--- a/css/modals/security/_security.scss
+++ b/css/modals/security/_security.scss
@@ -47,13 +47,10 @@
}
}
-.new-toolbox .toolbox-content .toolbox-icon.security-toolbar-button,
.new-toolbox .toolbox-content .toolbox-icon.toggled.security-toolbar-button {
- background: rgba(241, 173, 51, 0.7);
- border: 1px solid rgba(255, 255, 255, 0.4);
+ border-width: 0;
- &:hover {
- background: rgba(241, 173, 51, 0.7);
- border: 1px solid rgba(255, 255, 255, 0.4);
+ &:not(:hover) {
+ background: unset;
}
}
\ No newline at end of file
diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js
index 53abfc92a3..11ee2e1b8f 100644
--- a/react/features/base/icons/svg/index.js
+++ b/react/features/base/icons/svg/index.js
@@ -46,7 +46,6 @@ export { default as IconInfo } from './info.svg';
export { default as IconInviteMore } from './user-plus.svg';
export { default as IconKick } from './kick.svg';
export { default as IconLiveStreaming } from './public.svg';
-export { default as IconLockPassword } from './lock.svg';
export { default as IconMeetingLocked } from './meeting-locked.svg';
export { default as IconMeetingUnlocked } from './meeting-unlocked.svg';
export { default as IconMenu } from './menu.svg';
@@ -75,6 +74,8 @@ export { default as IconReply } from './reply.svg';
export { default as IconRestore } from './restore.svg';
export { default as IconRoomLock } from './security.svg';
export { default as IconRoomUnlock } from './security-locked.svg';
+export { default as IconSecurityOff } from './security-off.svg';
+export { default as IconSecurityOn } from './security-on.svg';
export { default as IconSearch } from './search.svg';
export { default as IconSettings } from './settings.svg';
export { default as IconSignalLevel0 } from './signal_cellular_0.svg';
@@ -87,7 +88,6 @@ export { default as IconShareVideo } from './shared-video.svg';
export { default as IconSwitchCamera } from './switch-camera.svg';
export { default as IconTileView } from './tiles-many.svg';
export { default as IconToggleRecording } from './camera-take-picture.svg';
-export { default as IconUnlockPassword } from './unlock.svg';
export { default as IconVideoQualityAudioOnly } from './AUD.svg';
export { default as IconVideoQualityHD } from './HD.svg';
export { default as IconVideoQualityLD } from './LD.svg';
diff --git a/react/features/base/icons/svg/lock.svg b/react/features/base/icons/svg/lock.svg
deleted file mode 100755
index 2dc225a6fc..0000000000
--- a/react/features/base/icons/svg/lock.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/react/features/base/icons/svg/security-off.svg b/react/features/base/icons/svg/security-off.svg
new file mode 100644
index 0000000000..0c3672c915
--- /dev/null
+++ b/react/features/base/icons/svg/security-off.svg
@@ -0,0 +1,14 @@
+
diff --git a/react/features/base/icons/svg/security-on.svg b/react/features/base/icons/svg/security-on.svg
new file mode 100644
index 0000000000..802e7a47a5
--- /dev/null
+++ b/react/features/base/icons/svg/security-on.svg
@@ -0,0 +1,15 @@
+
diff --git a/react/features/base/icons/svg/unlock.svg b/react/features/base/icons/svg/unlock.svg
deleted file mode 100755
index bb2706961e..0000000000
--- a/react/features/base/icons/svg/unlock.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/react/features/security/components/security-dialog/SecurityDialogButton.js b/react/features/security/components/security-dialog/SecurityDialogButton.js
index 6c3b839916..35df3274d7 100644
--- a/react/features/security/components/security-dialog/SecurityDialogButton.js
+++ b/react/features/security/components/security-dialog/SecurityDialogButton.js
@@ -2,7 +2,7 @@
import { createToolbarEvent, sendAnalytics } from '../../../analytics';
import { translate } from '../../../base/i18n';
-import { IconLockPassword, IconUnlockPassword } from '../../../base/icons';
+import { IconSecurityOff, IconSecurityOn } from '../../../base/icons';
import { connect } from '../../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox';
import { openSecurityDialog } from '../../actions';
@@ -28,9 +28,9 @@ type Props = AbstractButtonProps & {
*/
class SecurityDialogButton extends AbstractButton {
accessibilityLabel = 'toolbar.accessibilityLabel.security';
- icon = IconUnlockPassword;
+ icon = IconSecurityOff;
label = 'toolbar.security';
- toggledIcon = IconLockPassword;
+ toggledIcon = IconSecurityOn;
tooltip = 'toolbar.security';
/**