Add, Preview and Lock icons applied (#1005)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2021-09-03 12:37:53 -07:00
parent 0f2a09d5f1
commit 39eeedec2c
25 changed files with 133 additions and 48 deletions
--- a/portal-ui/src/icons/AddIcon.tsx
+++ b/portal-ui/src/icons/AddIcon.tsx
@@ -14,17 +14,15 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

-import React from "react";
-import { SvgIcon } from "@material-ui/core";
-const AddIcon = () => {
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@material-ui/core";
+
+const AddIcon = (props: SvgIconProps) => {
  return (
-    <SvgIcon viewBox="0 0 12 12">
-      <path
-        fill="#081c42"
-        className="a"
-        d="M-13160.269,1885.114h-3.235v-4.381h-4.382V1877.5h4.382v-4.381h3.235v4.381h4.383v3.238h-4.383v4.38Z"
-        transform="translate(13167.886 -1873.114)"
-      />
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.003 256">
+        <path d="M232.138 92.816h-68.953V23.863A23.937 23.937 0 00139.327.001h-22.623a23.948 23.948 0 00-23.891 23.862v68.953H23.86A23.936 23.936 0 00.001 116.681v22.639a23.934 23.934 0 0023.859 23.859h68.953v68.957a23.951 23.951 0 0023.891 23.865h22.623a23.94 23.94 0 0023.858-23.865v-68.957h68.953a23.931 23.931 0 0023.865-23.859v-22.639a23.933 23.933 0 00-23.865-23.865z" />
+      </svg>
    </SvgIcon>
  );
 };
--- a/portal-ui/src/icons/LockIcon.tsx
+++ b/portal-ui/src/icons/LockIcon.tsx
@@ -0,0 +1,37 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@material-ui/core";
+
+const LockIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.038 256">
+        <path
+          data-name="Trazado 406"
+          d="M188.653 75.155h-25.707V48.423A48.48 48.48 0 00114.521-.002a48.48 48.48 0 00-48.425 48.425v26.732h-25.71A40.5 40.5 0 00.001 115.68v85.128a40.506 40.506 0 0039.347 40.512l75.172 14.677 75.172-14.677a40.506 40.506 0 0039.347-40.512V115.68a40.5 40.5 0 00-40.386-40.525zm-102.5-26.732a28.4 28.4 0 0128.364-28.365 28.4 28.4 0 0128.364 28.365v26.732H86.152zm122.822 152.385a20.418 20.418 0 01-20.324 20.465h-.97l-73.164 14.285-73.164-14.285h-.97a20.418 20.418 0 01-20.324-20.465V115.68a20.418 20.418 0 0120.324-20.465h148.269a20.418 20.418 0 0120.324 20.465z"
+        />
+        <path
+          data-name="Trazado 407"
+          d="M114.262 140.44a19.085 19.085 0 00-19.085 19.086 19.066 19.066 0 008.4 15.818v15.377a10.1 10.1 0 0010.073 10.073h1.218a10.1 10.1 0 0010.073-10.073v-15.377a19.067 19.067 0 008.4-15.818 19.086 19.086 0 00-19.079-19.086z"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default LockIcon;
--- a/portal-ui/src/icons/PreviewIcon.tsx
+++ b/portal-ui/src/icons/PreviewIcon.tsx
@@ -0,0 +1,37 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@material-ui/core";
+
+const PreviewIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.534 164.865">
+        <path
+          data-name="Trazado 408"
+          d="M250.595 66.052A146.967 146.967 0 00127.767 0 146.965 146.965 0 004.94 66.052a29.628 29.628 0 000 32.76 146.965 146.965 0 00122.827 66.052 146.967 146.967 0 00122.828-66.052 29.63 29.63 0 000-32.76zm-17.648 21.08a125.854 125.854 0 01-105.18 56.57 125.855 125.855 0 01-105.18-56.57 8.5 8.5 0 010-9.4 125.855 125.855 0 01105.18-56.57 125.855 125.855 0 01105.18 56.569 8.5 8.5 0 010 9.401z"
+        />
+        <path
+          data-name="Trazado 409"
+          d="M127.767 28.002a54.492 54.492 0 00-54.431 54.43 54.492 54.492 0 0054.431 54.431 54.493 54.493 0 0054.431-54.431 54.493 54.493 0 00-54.431-54.43zm0 87.7a33.305 33.305 0 01-33.268-33.268 33.305 33.305 0 0133.268-33.267 33.305 33.305 0 0133.263 33.265 33.305 33.305 0 01-33.263 33.268z"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default PreviewIcon;
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -74,3 +74,5 @@ export { default as ServersIcon } from "./ServersIcon";
 export { default as DrivesIcon } from "./DrivesIcon";
 export { default as TotalObjectsIcon } from "./TotalObjectsIcon";
 export { default as CircleIcon } from "./CircleIcon";
+export { default as PreviewIcon } from "./PreviewIcon";
+export { default as LockIcon } from "./LockIcon";
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -26,7 +26,7 @@ import { setErrorSnackMessage } from "../../../actions";
 import AddServiceAccount from "./AddServiceAccount";
 import DeleteServiceAccount from "./DeleteServiceAccount";
 import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
-import { CreateIcon } from "../../../icons";
+import { AddIcon, CreateIcon, LockIcon } from "../../../icons";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
@@ -38,7 +38,6 @@ import {
  searchField,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
-import LockIcon from "@material-ui/icons/Lock";
 import ChangePasswordModal from "./ChangePasswordModal";
 import SearchIcon from "../../../icons/SearchIcon";

@@ -260,7 +259,7 @@ const Account = ({
            <Button
              variant="contained"
              color="primary"
-              startIcon={<CreateIcon />}
+              startIcon={<AddIcon />}
              onClick={() => {
                setAddScreenOpen(true);
                setSelectedServiceAccount(null);
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -27,7 +27,7 @@ import api from "../../../../common/api";
 import AddAccessRuleModal from "./AddAccessRule";
 import DeleteAccessRuleModal from "./DeleteAccessRule";
 import EditAccessRuleModal from "./EditAccessRule";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import Grid from "@material-ui/core/Grid";
 import {
  actionsTray,
@@ -222,7 +222,7 @@ const AccessRule = ({
        <Button
          variant="contained"
          color="primary"
-          startIcon={<CreateIcon />}
+          startIcon={<AddIcon />}
          component="label"
          onClick={() => {
            setAddAccessRuleOpen(true);
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -118,6 +118,10 @@ const styles = (theme: Theme) =>
    },
    capitalizeFirst: {
      textTransform: "capitalize",
+      "& .MuiSvgIcon-root": {
+        width: 16,
+        height: 16,
+      },
    },
    doubleElement: {
      display: "flex",
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
@@ -20,7 +20,7 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
 import get from "lodash/get";
 import Grid from "@material-ui/core/Grid";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import { BucketEvent, BucketEventList } from "../types";
 import { setErrorSnackMessage } from "../../../../actions";
 import { AppState } from "../../../../store";
@@ -133,7 +133,7 @@ const BucketEventsPanel = ({
          <Button
            variant="contained"
            color="primary"
-            startIcon={<CreateIcon />}
+            startIcon={<AddIcon />}
            size="medium"
            onClick={() => {
              setAddEventScreenOpen(true);
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
@@ -22,7 +22,7 @@ import get from "lodash/get";
 import * as reactMoment from "react-moment";
 import Grid from "@material-ui/core/Grid";
 import { LifeCycleItem } from "../types";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import {
  actionsTray,
  searchField,
@@ -181,7 +181,7 @@ const BucketLifecyclePanel = ({
          <Button
            variant="contained"
            color="primary"
-            startIcon={<CreateIcon />}
+            startIcon={<AddIcon />}
            size="medium"
            onClick={() => {
              setAddLifecycleOpen(true);
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import { setErrorSnackMessage } from "../../../../actions";
 import {
  actionsTray,
@@ -198,7 +198,7 @@ const BucketReplicationPanel = ({
            variant="contained"
            color="primary"
            disabled={!canPutReplication}
-            startIcon={<CreateIcon />}
+            startIcon={<AddIcon />}
            size="medium"
            onClick={() => {
              setOpenReplicationOpen(true);
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
@@ -91,6 +91,10 @@ const styles = (theme: Theme) =>
    },
    capitalizeFirst: {
      textTransform: "capitalize",
+      "& .MuiSvgIcon-root": {
+        width: 16,
+        height: 16,
+      },
    },
    titleCol: {
      width: "25%",
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -24,7 +24,7 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 import FileCopyIcon from "@material-ui/icons/FileCopy";
 import Moment from "react-moment";
 import { Bucket, BucketList, HasPermissionResponse } from "../types";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import { niceBytes } from "../../../../common/utils";
 import { AppState } from "../../../../store";
 import { addBucketOpen, addBucketReset } from "../actions";
@@ -286,7 +286,7 @@ const ListBuckets = ({
              <Button
                variant="contained"
                color="primary"
-                startIcon={<CreateIcon />}
+                startIcon={<AddIcon />}
                onClick={() => {
                  addBucketOpen(true);
                }}
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
@@ -177,6 +177,10 @@ const styles = (theme: Theme) =>
    },
    capitalizeFirst: {
      textTransform: "capitalize",
+      "& .MuiSvgIcon-root": {
+        width: 16,
+        height: 16,
+      },
    },
    titleCol: {
      width: "25%",
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
@@ -18,7 +18,6 @@ import isString from "lodash/isString";
 import { Link } from "react-router-dom";
 import { createStyles, withStyles } from "@material-ui/core/styles";
 import { IconButton } from "@material-ui/core";
-import ViewIcon from "./TableActionIcons/ViewIcon";
 import ShareIcon from "./TableActionIcons/ShareIcon";
 import CloudIcon from "./TableActionIcons/CloudIcon";
 import ConsoleIcon from "./TableActionIcons/ConsoleIcon";
@@ -26,7 +25,7 @@ import DisableIcon from "./TableActionIcons/DisableIcon";
 import FormatDriveIcon from "./TableActionIcons/FormatDriveIcon";
 import EditIcon from "../../../../icons/EditIcon";
 import TrashIcon from "../../../../icons/TrashIcon";
-import { IAMPoliciesIcon } from "../../../../icons";
+import { IAMPoliciesIcon, PreviewIcon } from "../../../../icons";
 import DownloadIcon from "../../../../icons/DownloadIcon";

 const styles = () =>
@@ -58,7 +57,7 @@ interface IActionButton {
 const defineIcon = (type: string, selected: boolean) => {
  switch (type) {
    case "view":
-      return <ViewIcon active={selected} />;
+      return <PreviewIcon />;
    case "edit":
      return <EditIcon />;
    case "delete":
@@ -78,7 +77,7 @@ const defineIcon = (type: string, selected: boolean) => {
    case "format":
      return <FormatDriveIcon active={selected} />;
    case "preview":
-      return <ViewIcon active={selected} />;
+      return <PreviewIcon />;
  }

  return null;
--- a/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -29,7 +29,7 @@ import {
  TransformedEndpointItem,
 } from "./types";
 import { notificationTransform } from "./utils";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import AddNotificationEndpoint from "./AddNotificationEndpoint";
 import { setErrorSnackMessage } from "../../../../actions";
@@ -201,7 +201,7 @@ const ListNotificationEndpoints = ({
                        <Button
                          variant="contained"
                          color="primary"
-                          startIcon={<CreateIcon />}
+                          startIcon={<AddIcon />}
                          onClick={openNewLambdaSelector}
                        >
                          Add Notification Target
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -29,7 +29,7 @@ import {
  settingsCommon,
  typesSelection,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import { setErrorSnackMessage } from "../../../../actions";
 import { ITierElement, ITierResponse } from "./types";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -246,7 +246,7 @@ const ListTiersConfiguration = ({
                        <Button
                          variant="contained"
                          color="primary"
-                          startIcon={<CreateIcon />}
+                          startIcon={<AddIcon />}
                          onClick={addTier}
                        >
                          Add Tier
--- a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
@@ -26,7 +26,7 @@ import {
 } from "@material-ui/core";
 import get from "lodash/get";
 import GroupIcon from "@material-ui/icons/Group";
-import { CreateIcon } from "../../../icons";
+import { AddIcon, CreateIcon } from "../../../icons";
 import { setErrorSnackMessage } from "../../../actions";
 import {
  actionsTray,
@@ -292,7 +292,7 @@ const DirectCSIMain = ({
        <Button
          variant="contained"
          color="primary"
-          startIcon={<CreateIcon />}
+          startIcon={<AddIcon />}
          onClick={formatAllDrives}
          disabled={notAvailable}
        >
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -21,7 +21,7 @@ import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import { Button } from "@material-ui/core";
-import { CreateIcon } from "../../../icons";
+import { AddIcon, CreateIcon } from "../../../icons";
 import { setErrorSnackMessage } from "../../../actions";
 import { GroupsList } from "./types";
 import { stringSort } from "../../../utils/sortFunctions";
@@ -209,7 +209,7 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
            <Button
              variant="contained"
              color="primary"
-              startIcon={<CreateIcon />}
+              startIcon={<AddIcon />}
              onClick={() => {
                setSelectedGroup(null);
                setGroupOpen(true);
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
@@ -23,7 +23,7 @@ import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import { IconButton, Tooltip } from "@material-ui/core";
-import { BucketsIcon, CreateIcon } from "../../../icons";
+import { AddIcon, BucketsIcon, CreateIcon } from "../../../icons";
 import { niceBytes } from "../../../common/utils";
 import { Bucket, BucketList, HasPermissionResponse } from "../Buckets/types";
 import {
@@ -246,7 +246,7 @@ const BrowseBuckets = ({
                          setAddScreenOpen(true);
                        }}
                      >
-                        <CreateIcon />
+                        <AddIcon />
                      </IconButton>
                    </Tooltip>
                  </Fragment>
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -23,7 +23,7 @@ import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import { Policy, PolicyList } from "./types";
-import { CreateIcon } from "../../../icons";
+import { AddIcon, CreateIcon } from "../../../icons";
 import { setErrorSnackMessage } from "../../../actions";
 import {
  actionsTray,
@@ -196,7 +196,7 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => {
            <Button
              variant="contained"
              color="primary"
-              startIcon={<CreateIcon />}
+              startIcon={<AddIcon />}
              onClick={() => {
                setAddScreenOpen(true);
                setPolicyEdit(null);
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -30,7 +30,7 @@ import {
  settingsCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { setErrorSnackMessage } from "../../../../actions";
-import { CircleIcon, CreateIcon } from "../../../../icons";
+import { AddIcon, CircleIcon, CreateIcon } from "../../../../icons";
 import { resetAddTenantForm } from "../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
@@ -314,7 +314,7 @@ const ListTenants = ({
                      <Button
                        variant="contained"
                        color="primary"
-                        startIcon={<CreateIcon />}
+                        startIcon={<AddIcon />}
                        onClick={createTenant}
                      >
                        Create Tenant
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
@@ -24,7 +24,7 @@ import {
 } from "../../Common/FormComponents/common/styleLibrary";
 import { Button, TextField } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import { CreateIcon } from "../../../../icons";
+import { AddIcon, CreateIcon } from "../../../../icons";
 import { IPool, ITenant } from "../ListTenants/types";
 import { setErrorSnackMessage } from "../../../../actions";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
@@ -127,7 +127,7 @@ const PoolsSummary = ({
          <Button
            variant="contained"
            color="primary"
-            startIcon={<CreateIcon />}
+            startIcon={<AddIcon />}
            onClick={() => {
              setAddPool(true);
            }}
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -22,7 +22,7 @@ import { Button, Grid, InputAdornment, TextField } from "@material-ui/core";
 import GroupIcon from "@material-ui/icons/Group";
 import { User, UsersList } from "./types";
 import { usersSort } from "../../../utils/sortFunctions";
-import { CreateIcon } from "../../../icons";
+import { AddIcon, CreateIcon } from "../../../icons";
 import {
  actionsTray,
  containerForHeader,
@@ -252,7 +252,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
            <Button
              variant="contained"
              color="primary"
-              startIcon={<CreateIcon />}
+              startIcon={<AddIcon />}
              onClick={() => {
                setAddScreenOpen(true);
                setSelectedUser(null);
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -21,6 +21,7 @@ import { Link } from "react-router-dom";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button, Grid, IconButton, Tooltip } from "@material-ui/core";
 import {
+  AddIcon,
  CreateIcon,
  DeleteIcon,
  IAMPoliciesIcon,
@@ -361,7 +362,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                <Button
                  variant="contained"
                  color="primary"
-                  startIcon={<CreateIcon />}
+                  startIcon={<AddIcon />}
                  size="medium"
                  onClick={() => {
                    setAddGroupOpen(true);
--- a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
+++ b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
@@ -31,7 +31,7 @@ import { ErrorResponseHandler } from "../../../common/types";
 import AddUserServiceAccount from "./AddUserServiceAccount";
 import DeleteServiceAccount from "../Account/DeleteServiceAccount";
 import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
-import { CreateIcon } from "../../../icons";
+import { AddIcon, CreateIcon } from "../../../icons";
 import Button from "@material-ui/core/Button";

 interface IUserServiceAccountsProps {
@@ -163,7 +163,7 @@ const UserServiceAccountsPanel = ({
        <Button
          variant="contained"
          color="primary"
-          startIcon={<CreateIcon />}
+          startIcon={<AddIcon />}
          onClick={() => {
            setAddScreenOpen(true);
            setAddScreenOpen(true);