key icon for api keys

icons/key.svg

+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8 9a7 7 0 1 1 7 7h-2v2h-2v2H9v2H2v-5.414l6.148-6.148A7.025 7.025 0 0 1 8 9Zm3 5h4a5 5 0 1 0-4.786-3.547l.174.573L4 17.414V20h3v-2h2v-2h2v-2Zm4-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

ui/apiKey/ApiKeyTable/ApiKeyListItem.tsx

-import { HStack, Text, Box } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { ApiKey } from 'types/api/account';
 
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import ApiKeySnippet from 'ui/shared/ApiKeySnippet';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -25,13 +24,7 @@ const ApiKeyListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
 
   return (
     <AccountListItemMobile>
-      <Box>
-        <HStack alignItems="flex-start">
-          <Text fontSize="md" fontWeight={ 600 }>{ item.api_key }</Text>
-          <CopyToClipboard text={ item.api_key }/>
-        </HStack>
-        <Text fontSize="sm" marginTop={ 0.5 } variant="secondary">{ item.name }</Text>
-      </Box>
+      <ApiKeySnippet apiKey={ item.api_key } name={ item.name }/>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
     </AccountListItemMobile>
   );

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

 import {
   Tr,
   Td,
-  HStack,
-  Text,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { ApiKey } from 'types/api/account';
 
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import ApiKeySnippet from 'ui/shared/ApiKeySnippet';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -30,11 +28,7 @@ const ApiKeyTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.api_key }>
       <Td>
-        <HStack>
-          <Text fontSize="md" fontWeight={ 600 }>{ item.api_key }</Text>
-          <CopyToClipboard text={ item.api_key }/>
-        </HStack>
-        <Text fontSize="sm" marginTop={ 0.5 } variant="secondary">{ item.name }</Text>
+        <ApiKeySnippet apiKey={ item.api_key } name={ item.name }/>
       </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>

ui/shared/ApiKeySnippet.tsx

+import { Box, HStack, Icon, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import keyIcon from 'icons/key.svg';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+
+interface Props {
+  apiKey: string;
+  name: string;
+}
+
+const ApiKeySnippet = ({ apiKey, name }: Props) => {
+  return (
+    <HStack spacing={ 2 } alignItems="start">
+      <Icon as={ keyIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
+      <Box>
+        <Flex alignItems={{ base: 'flex-start', lg: 'center' }}>
+          <Text fontSize="md" lineHeight={ 6 } fontWeight={ 600 } mr={ 1 }>{ apiKey }</Text>
+          <CopyToClipboard text={ apiKey }/>
+        </Flex>
+        { name && <Text fontSize="sm" variant="secondary" mt={ 1 }>{ name }</Text> }
+      </Box>
+    </HStack>
+  );
+};
+
+export default React.memo(ApiKeySnippet);