[IMPROVEMENT] Refactor icon package (#2146)

* [IMPROVEMENT] Refactor Icon Package

* some size fixes

app/containers/DisclosureIndicator.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { View, Image, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
+import { CustomIcon } from '../lib/Icons';
 
 const styles = StyleSheet.create({
 	disclosureContainer: {
@@ -10,17 +11,14 @@ const styles = StyleSheet.create({
 		marginRight: 9,
 		alignItems: 'center',
 		justifyContent: 'center'
-	},
-	disclosureIndicator: {
-		width: 20,
-		height: 20
 	}
 });
 
 export const DisclosureImage = React.memo(({ theme }) => (
-	<Image
+	<CustomIcon
-		source={{ uri: 'disclosure_indicator' }}
+		name='chevron-right'
-		style={[styles.disclosureIndicator, { tintColor: themes[theme].auxiliaryTintColor }]}
+		color={themes[theme].auxiliaryTintColor}
+		size={20}
 	/>
 ));
 DisclosureImage.propTypes = {

app/containers/HeaderButton.js

@@ -38,7 +38,7 @@ export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) =
 
 export const CloseModalButton = React.memo(({ navigation, testID, onPress = () => navigation.pop() }) => (
 	<CustomHeaderButtons left>
-		<Item title='close' iconName='cross' onPress={onPress} testID={testID} />
+		<Item title='close' iconName='Cross' onPress={onPress} testID={testID} />
 	</CustomHeaderButtons>
 ));
 
@@ -46,7 +46,7 @@ export const CancelModalButton = React.memo(({ onPress, testID }) => (
 	<CustomHeaderButtons left>
 		{isIOS
 			? <Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
-			: <Item title='close' iconName='cross' onPress={onPress} testID={testID} />
+			: <Item title='close' iconName='Cross' onPress={onPress} testID={testID} />
 		}
 	</CustomHeaderButtons>
 ));
@@ -59,7 +59,7 @@ export const MoreButton = React.memo(({ onPress, testID }) => (
 
 export const SaveButton = React.memo(({ onPress, testID }) => (
 	<CustomHeaderButtons>
-		<Item title='save' iconName='Download' onPress={onPress} testID={testID} />
+		<Item title='save' iconName='download' onPress={onPress} testID={testID} />
 	</CustomHeaderButtons>
 ));
 

app/containers/MessageBox/CommandsPreview/Item.js

@@ -32,7 +32,7 @@ const Item = ({ item, theme }) => {
 						{ loading ? <ActivityIndicator theme={theme} /> : null }
 					</FastImage>
 				)
-				: <CustomIcon name='file-generic' size={36} color={themes[theme].actionTintColor} />
+				: <CustomIcon name='clip' size={36} color={themes[theme].actionTintColor} />
 			}
 		</TouchableOpacity>
 	);

app/containers/MessageBox/Recording.js

@@ -149,7 +149,7 @@ export default class extends React.PureComponent {
 						<CustomIcon
 							size={22}
 							color={themes[theme].dangerColor}
-							name='cross'
+							name='Cross'
 						/>
 					</BorderlessButton>
 					<Text key='currentTime' style={[styles.textBoxInput, { color: themes[theme].titleText }]}>{currentTime}</Text>

app/containers/MessageBox/ReplyPreview.js

@@ -71,7 +71,7 @@ const ReplyPreview = React.memo(({
 					theme={theme}
 				/>
 			</View>
-			<CustomIcon name='cross' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
+			<CustomIcon name='Cross' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
 		</View>
 	);
 }, (prevProps, nextProps) => prevProps.replying === nextProps.replying && prevProps.theme === nextProps.theme);

app/containers/MessageBox/UploadModal.js

@@ -205,7 +205,7 @@ class UploadModal extends Component {
 				</View>
 			);
 		}
-		return (<CustomIcon name='file-generic' size={72} style={[styles.fileIcon, { color: themes[theme].tintColor }]} />);
+		return (<CustomIcon name='clip' size={72} style={[styles.fileIcon, { color: themes[theme].tintColor }]} />);
 	}
 
 	render() {

app/containers/MessageBox/buttons/BaseButton.js

@@ -17,7 +17,7 @@ const BaseButton = React.memo(({
 		accessibilityLabel={I18n.t(accessibilityLabel)}
 		accessibilityTraits='button'
 	>
-		<CustomIcon name={icon} size={23} color={themes[theme].tintColor} />
+		<CustomIcon name={icon} size={25} color={themes[theme].tintColor} />
 	</BorderlessButton>
 ));
 

app/containers/MessageBox/buttons/CancelEditingButton.js

@@ -8,7 +8,7 @@ const CancelEditingButton = React.memo(({ theme, onPress }) => (
 		onPress={onPress}
 		testID='messagebox-cancel-editing'
 		accessibilityLabel='Cancel_editing'
-		icon='cross'
+		icon='Cross'
 		theme={theme}
 	/>
 ));

app/containers/MessageBox/buttons/SendButton.js

@@ -8,7 +8,7 @@ const SendButton = React.memo(({ theme, onPress }) => (
 		onPress={onPress}
 		testID='messagebox-send-message'
 		accessibilityLabel='Send_message'
-		icon='Send-active'
+		icon='send-active'
 		theme={theme}
 	/>
 ));

app/containers/ReactionsModal.js

@@ -100,7 +100,7 @@ const ModalContent = React.memo(({
 					<View style={styles.titleContainer}>
 						<CustomIcon
 							style={[styles.closeButton, { color: themes[props.theme].buttonText }]}
-							name='cross'
+							name='Cross'
 							size={20}
 						/>
 						<Text style={[styles.title, { color: themes[props.theme].buttonText }]}>{I18n.t('Reactions')}</Text>

app/containers/RoomTypeIcon.js

@@ -1,16 +1,13 @@
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import { CustomIcon } from '../lib/Icons';
 import { STATUS_COLORS, themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
-	style: {
+	icon: {
-		marginRight: 7,
+		marginTop: 3,
-		marginTop: 3
+		marginRight: 4
-	},
-	discussion: {
-		marginRight: 6
 	}
 });
 
@@ -23,22 +20,32 @@ const RoomTypeIcon = React.memo(({
 
 	const color = themes[theme].auxiliaryText;
 
+	let icon = 'lock';
 	if (type === 'discussion') {
-		// FIXME: These are temporary only. We should have all room icons on <Customicon />, but our design team is still working on this.
+		icon = 'chat';
-		return <CustomIcon name='chat' size={13} style={[styles.style, styles.iconColor, styles.discussion, { color }]} />;
+	} else if (type === 'c') {
+		icon = 'hash';
+	} else if (type === 'd') {
+		if (isGroupChat) {
+			icon = 'team';
+		} else {
+			icon = 'at';
+		}
+	} else if (type === 'l') {
+		icon = 'livechat';
 	}
 
-	if (type === 'c') {
+	return (
-		return <Image source={{ uri: 'hashtag' }} style={[styles.style, style, { width: size, height: size, tintColor: color }]} />;
+		<CustomIcon
-	} if (type === 'd') {
+			name={icon}
-		if (isGroupChat) {
+			size={size}
-			return <CustomIcon name='team' size={13} style={[styles.style, styles.discussion, { color }]} />;
+			style={[
-		}
+				type === 'l' ? { color: STATUS_COLORS[status] } : { color },
-		return <CustomIcon name='at' size={13} style={[styles.style, styles.discussion, { color }]} />;
+				styles.icon,
-	} if (type === 'l') {
+				style
-		return <CustomIcon name='omnichannel' size={13} style={[styles.style, styles.discussion, { color: STATUS_COLORS[status] }]} />;
+			]}
-	}
+		/>
-	return <Image source={{ uri: 'lock' }} style={[styles.style, style, { width: size, height: size, tintColor: color }]} />;
+	);
 });
 
 RoomTypeIcon.propTypes = {
@@ -51,7 +58,7 @@ RoomTypeIcon.propTypes = {
 };
 
 RoomTypeIcon.defaultProps = {
-	size: 10
+	size: 16
 };
 
 export default RoomTypeIcon;

app/containers/TextInput.js

@@ -111,7 +111,7 @@ export default class RCTextInput extends React.PureComponent {
 		return (
 			<BorderlessButton onPress={this.tooglePassword} style={[styles.iconContainer, styles.iconRight]}>
 				<CustomIcon
-					name={showPassword ? 'Eye' : 'eye-off'}
+					name={showPassword ? 'eye' : 'eye-off'}
 					testID={testID ? `${ testID }-icon-right` : null}
 					style={{ color: themes[theme].auxiliaryText }}
 					size={20}

app/containers/UIKit/MultiSelect/Chips.js

@@ -24,7 +24,7 @@ const Chip = ({
 		<>
 			{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
 			<Text numberOfLines={1} style={[styles.chipText, { color: themes[theme].titleText }]}>{textParser([item.text])}</Text>
-			<CustomIcon name='cross' size={16} color={themes[theme].auxiliaryText} />
+			<CustomIcon name='Cross' size={16} color={themes[theme].auxiliaryText} />
 		</>
 	</Touchable>
 );

app/containers/UIKit/MultiSelect/Input.js

@@ -22,7 +22,7 @@ const Input = ({
 			{
 				loading
 					? <ActivityIndicator style={[styles.loading, styles.icon]} />
-					: <CustomIcon name='arrow-down' size={22} color={themes[theme].auxiliaryText} style={styles.icon} />
+					: <CustomIcon name='chevron-down' size={22} color={themes[theme].auxiliaryText} style={styles.icon} />
 			}
 		</View>
 	</Touchable>

app/containers/UIKit/Select.js

@@ -55,7 +55,7 @@ export const Select = ({
 	const Icon = () => (
 		loading
 			? <ActivityIndicator style={styles.loading} />
-			: <CustomIcon size={22} name='arrow-down' style={isAndroid && styles.icon} color={themes[theme].auxiliaryText} />
+			: <CustomIcon size={22} name='chevron-down' style={isAndroid && styles.icon} color={themes[theme].auxiliaryText} />
 	);
 
 	return (

app/containers/message/CallButton.js

@@ -22,7 +22,7 @@ const CallButton = React.memo(({
 				hitSlop={BUTTON_HIT_SLOP}
 			>
 				<>
-					<CustomIcon name='video' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
+					<CustomIcon name='video-1' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
 					<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Click_to_join')}</Text>
 				</>
 			</Touchable>

app/containers/message/RepliedThread.js

@@ -26,7 +26,7 @@ const RepliedThread = React.memo(({
 
 	return (
 		<View style={styles.repliedThread} testID={`message-thread-replied-on-${ msg }`}>
-			<CustomIcon name='thread' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
+			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
 			<Text style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} numberOfLines={1}>{msg}</Text>
 			<DisclosureIndicator theme={theme} />
 		</View>

app/containers/message/Thread.js

@@ -23,7 +23,7 @@ const Thread = React.memo(({
 				style={[styles.button, styles.smallButton, { backgroundColor: themes[theme].tintColor }]}
 				testID={`message-thread-button-${ msg }`}
 			>
-				<CustomIcon name='thread' size={20} style={[styles.buttonIcon, { color: themes[theme].buttonText }]} />
+				<CustomIcon name='threads' size={20} style={[styles.buttonIcon, { color: themes[theme].buttonText }]} />
 				<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{buttonText}</Text>
 			</View>
 			<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>

app/notifications/inApp/index.js

@@ -224,7 +224,7 @@ class NotificationBadge extends React.Component {
 					</>
 				</Touchable>
 				<TouchableOpacity onPress={this.hide}>
-					<CustomIcon name='circle-cross' style={[styles.close, { color: themes[theme].titleText }]} size={20} />
+					<CustomIcon name='cancel' style={[styles.close, { color: themes[theme].titleText }]} size={20} />
 				</TouchableOpacity>
 			</Animated.View>
 		);

app/presentation/RoomItem/Actions.js

@@ -91,7 +91,7 @@ export const RightActions = React.memo(({
 			>
 				<RectButton style={[styles.actionButton, { backgroundColor: themes[theme].favoriteBackground }]} onPress={toggleFav}>
 					<>
-						<CustomIcon size={20} name={favorite ? 'Star-filled' : 'star'} color={themes[theme].buttonText} />
+						<CustomIcon size={20} name={favorite ? 'star-filled' : 'star'} color={themes[theme].buttonText} />
 						<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t(favorite ? 'Unfavorite' : 'Favorite')}</Text>
 					</>
 				</RectButton>

app/presentation/RoomItem/styles.js

@@ -66,6 +66,7 @@ export default StyleSheet.create({
 		textAlign: 'center'
 	},
 	status: {
+		marginLeft: 4,
 		marginRight: 7,
 		marginTop: 3
 	},

app/views/ChangePasscodeView.js

@@ -83,7 +83,7 @@ const ChangePasscodeView = React.memo(({ theme }) => {
 			{!data?.force
 				? (
 					<Touchable onPress={onCancel} style={styles.close}>
-						<CustomIcon name='cross' color={themes[theme].passcodePrimary} size={30} />
+						<CustomIcon name='Cross' color={themes[theme].passcodePrimary} size={30} />
 					</Touchable>
 				)
 				: null}

app/views/DirectoryView/Options.js

@@ -61,7 +61,7 @@ export default class DirectoryOptions extends PureComponent {
 		let icon = 'user';
 		if (itemType === 'channels') {
 			text = 'Channels';
-			icon = 'hashtag';
+			icon = 'hash';
 		}
 
 		return (
@@ -100,7 +100,7 @@ export default class DirectoryOptions extends PureComponent {
 					<Touch onPress={this.close} theme={theme}>
 						<View style={[styles.dropdownContainerHeader, styles.dropdownItemContainer, { borderColor: themes[theme].separatorColor }]}>
 							<Text style={[styles.dropdownToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Search_by')}</Text>
-							<CustomIcon style={[styles.dropdownItemIcon, styles.inverted, { color: themes[theme].auxiliaryTintColor }]} size={22} name='arrow-down' />
+							<CustomIcon style={[styles.dropdownItemIcon, styles.inverted, { color: themes[theme].auxiliaryTintColor }]} size={22} name='chevron-down' />
 						</View>
 					</Touch>
 					{this.renderItem('channels')}

app/views/DirectoryView/index.js

@@ -166,9 +166,9 @@ class DirectoryView extends React.Component {
 					theme={theme}
 				>
 					<View style={[sharedStyles.separatorVertical, styles.toggleDropdownContainer, { borderColor: themes[theme].separatorColor }]}>
-						<CustomIcon style={[styles.toggleDropdownIcon, { color: themes[theme].tintColor }]} size={20} name={type === 'users' ? 'user' : 'hashtag'} />
+						<CustomIcon style={[styles.toggleDropdownIcon, { color: themes[theme].tintColor }]} size={20} name={type === 'users' ? 'user' : 'hash'} />
 						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{type === 'users' ? I18n.t('Users') : I18n.t('Channels')}</Text>
-						<CustomIcon name='arrow-down' size={20} style={[styles.toggleDropdownArrow, { color: themes[theme].auxiliaryTintColor }]} />
+						<CustomIcon name='chevron-down' size={20} style={[styles.toggleDropdownArrow, { color: themes[theme].auxiliaryTintColor }]} />
 					</View>
 				</Touch>
 			</>

app/views/NewMessageView.js

@@ -182,7 +182,7 @@ class NewMessageView extends React.Component {
 					{this.renderButton({
 						onPress: this.createChannel,
 						title: I18n.t('Create_Channel'),
-						icon: 'hashtag',
+						icon: 'hash',
 						testID: 'new-message-view-create-channel',
 						first: true
 					})}

app/views/ProfileView/index.js

@@ -335,7 +335,7 @@ class ProfileView extends React.Component {
 					key: 'profile-view-upload-avatar'
 				})}
 				{this.renderAvatarButton({
-					child: <CustomIcon name='permalink' size={30} color={themes[theme].bodyText} />,
+					child: <CustomIcon name='link' size={30} color={themes[theme].bodyText} />,
 					onPress: () => this.setAvatar({ url: avatarUrl, data: avatarUrl, service: 'url' }),
 					disabled: !avatarUrl,
 					key: 'profile-view-avatar-url-button'

app/views/RoomActionsView/index.js

@@ -239,13 +239,13 @@ class RoomActionsView extends React.Component {
 
 		const jitsiActions = jitsiEnabled ? [
 			{
-				icon: 'omnichannel',
+				icon: 'mic',
 				name: I18n.t('Voice_call'),
 				event: () => RocketChat.callJitsi(rid, true),
 				testID: 'room-actions-voice'
 			},
 			{
-				icon: 'video',
+				icon: 'video-1',
 				name: I18n.t('Video_call'),
 				event: () => RocketChat.callJitsi(rid),
 				testID: 'room-actions-video'
@@ -271,7 +271,7 @@ class RoomActionsView extends React.Component {
 		}, {
 			data: [
 				{
-					icon: 'file-generic',
+					icon: 'clip',
 					name: I18n.t('Files'),
 					route: 'MessagesView',
 					params: { rid, t, name: 'Files' },
@@ -379,7 +379,7 @@ class RoomActionsView extends React.Component {
 			}
 			if (canInviteUser) {
 				actions.push({
-					icon: 'user-plus',
+					icon: 'add-user',
 					name: I18n.t('Invite_users'),
 					route: 'InviteUsersView',
 					params: {
@@ -395,7 +395,7 @@ class RoomActionsView extends React.Component {
 				sections.push({
 					data: [
 						{
-							icon: 'sign-out',
+							icon: 'exit',
 							name: I18n.t('Leave_channel'),
 							type: 'danger',
 							event: this.leaveChannel,
@@ -409,14 +409,14 @@ class RoomActionsView extends React.Component {
 			sections[2].data = [];
 
 			sections[2].data.push({
-				icon: 'circle-cross',
+				icon: 'cancel',
 				name: I18n.t('Close'),
 				event: this.closeLivechat
 			});
 
 			if (canForwardGuest) {
 				sections[2].data.push({
-					icon: 'reply',
+					icon: 'transfer',
 					name: I18n.t('Forward'),
 					route: 'ForwardLivechatView',
 					params: { rid }
@@ -425,14 +425,14 @@ class RoomActionsView extends React.Component {
 
 			if (canReturnQueue) {
 				sections[2].data.push({
-					icon: 'back',
+					icon: 'undo',
 					name: I18n.t('Return'),
 					event: this.returnLivechat
 				});
 			}
 
 			sections[2].data.push({
-				icon: 'reload',
+				icon: 'history',
 				name: I18n.t('Navigation_history'),
 				route: 'VisitorNavigationView',
 				params: { rid }

app/views/RoomInfoView/index.js

@@ -304,7 +304,7 @@ class RoomInfoView extends React.Component {
 	renderButtons = () => (
 		<View style={styles.roomButtonsContainer}>
 			{this.renderButton(this.goRoom, 'message', I18n.t('Message'))}
-			{this.renderButton(this.videoCall, 'video', I18n.t('Video_call'))}
+			{this.renderButton(this.videoCall, 'video-1', I18n.t('Video_call'))}
 		</View>
 	)
 

app/views/RoomView/Banner.js

@@ -35,7 +35,7 @@ const Banner = React.memo(({
 					<BorderlessButton onPress={closeBanner}>
 						<CustomIcon
 							color={themes[theme].auxiliaryText}
-							name='cross'
+							name='Cross'
 							size={20}
 						/>
 					</BorderlessButton>

app/views/RoomView/Header/Icon.js

@@ -7,7 +7,7 @@ import { CustomIcon } from '../../../lib/Icons';
 import Status from '../../../containers/Status/Status';
 import { isAndroid } from '../../../utils/deviceInfo';
 
-const ICON_SIZE = 18;
+const ICON_SIZE = 15;
 
 const styles = StyleSheet.create({
 	type: {
@@ -39,9 +39,9 @@ const Icon = React.memo(({
 	if (type === 'discussion') {
 		icon = 'chat';
 	} else if (type === 'thread') {
-		icon = 'thread';
+		icon = 'threads';
 	} else if (type === 'c') {
-		icon = 'hashtag';
+		icon = 'hash';
 	} else if (type === 'l') {
 		icon = 'livechat';
 	} else if (type === 'd') {

app/views/RoomView/Header/RightButtons.js

@@ -80,7 +80,7 @@ class RightButtonsContainer extends React.PureComponent {
 				<CustomHeaderButtons>
 					<Item
 						title='bell'
-						iconName={isFollowingThread ? 'bell' : 'Bell-off'}
+						iconName={isFollowingThread ? 'bell' : 'bell-off'}
 						onPress={this.toggleFollowThread}
 						testID={isFollowingThread ? 'room-view-header-unfollow' : 'room-view-header-follow'}
 					/>
@@ -91,8 +91,8 @@ class RightButtonsContainer extends React.PureComponent {
 			<CustomHeaderButtons>
 				{threadsEnabled ? (
 					<Item
-						title='thread'
+						title='threads'
-						iconName='thread'
+						iconName='threads'
 						onPress={this.goThreadsView}
 						testID='room-view-header-threads'
 					/>

app/views/RoomView/UploadProgress.js

@@ -173,11 +173,11 @@ class UploadProgress extends Component {
 			return (
 				[
 					<View key='row' style={styles.row}>
-						<CustomIcon name='file-generic' size={20} color={themes[theme].auxiliaryText} />
+						<CustomIcon name='clip' size={20} color={themes[theme].auxiliaryText} />
 						<Text style={[styles.descriptionContainer, styles.descriptionText, { color: themes[theme].auxiliaryText }]} ellipsizeMode='tail' numberOfLines={1}>
 							{I18n.t('Uploading')} {item.name}
 						</Text>
-						<CustomIcon name='cross' size={20} color={themes[theme].auxiliaryText} onPress={() => this.cancelUpload(item)} />
+						<CustomIcon name='Cross' size={20} color={themes[theme].auxiliaryText} onPress={() => this.cancelUpload(item)} />
 					</View>,
 					<View key='progress' style={[styles.progress, { width: (window.width * item.progress) / 100, backgroundColor: themes[theme].tintColor }]} />
 				]
@@ -192,7 +192,7 @@ class UploadProgress extends Component {
 						<Text style={[styles.tryAgainButtonText, { color: themes[theme].tintColor }]}>{I18n.t('Try_again')}</Text>
 					</TouchableOpacity>
 				</View>
-				<CustomIcon name='cross' size={20} color={themes[theme].auxiliaryText} onPress={() => this.deleteUpload(item)} />
+				<CustomIcon name='Cross' size={20} color={themes[theme].auxiliaryText} onPress={() => this.deleteUpload(item)} />
 			</View>
 		);
 	}

app/views/RoomsListView/Header/Header.android.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-	Text, View, TouchableOpacity, Image, StyleSheet
+	Text, View, TouchableOpacity, StyleSheet
 } from 'react-native';
 import PropTypes from 'prop-types';
 
@@ -8,6 +8,7 @@ import TextInput from '../../../presentation/TextInput';
 import I18n from '../../../i18n';
 import sharedStyles from '../../Styles';
 import { themes } from '../../../constants/colors';
+import { CustomIcon } from '../../../lib/Icons';
 
 const styles = StyleSheet.create({
 	container: {
@@ -30,12 +31,6 @@ const styles = StyleSheet.create({
 		fontSize: 14,
 		...sharedStyles.textRegular
 	},
-	disclosure: {
-		marginLeft: 9,
-		marginTop: 1,
-		width: 10,
-		height: 5
-	},
 	upsideDown: {
 		transform: [{ scaleY: -1 }]
 	}
@@ -70,13 +65,11 @@ const Header = React.memo(({
 				{isFetching ? <Text style={[styles.updating, titleColorStyle]}>{I18n.t('Updating')}</Text> : null}
 				<View style={styles.button}>
 					<Text style={[styles.server, isFetching && styles.serverSmall, titleColorStyle]} numberOfLines={1}>{serverName}</Text>
-					<Image
+					<CustomIcon
-						style={[
+						name='chevron-down'
-							styles.disclosure,
+						color={themes[theme].headerTintColor}
-							showServerDropdown && styles.upsideDown,
+						style={[showServerDropdown && styles.upsideDown]}
-							{ tintColor: themes[theme].headerTitleColor }
+						size={18}
-						]}
-						source={{ uri: 'disclosure_indicator_server' }}
 					/>
 				</View>
 			</TouchableOpacity>

app/views/RoomsListView/Header/Header.ios.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import {
-	Text, View, TouchableOpacity, Image, StyleSheet
+	Text, View, TouchableOpacity, StyleSheet
 } from 'react-native';
 import PropTypes from 'prop-types';
 
 import I18n from '../../../i18n';
 import sharedStyles from '../../Styles';
 import { themes } from '../../../constants/colors';
+import { CustomIcon } from '../../../lib/Icons';
 
 const styles = StyleSheet.create({
 	container: {
@@ -15,7 +16,8 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	button: {
-		flexDirection: 'row'
+		flexDirection: 'row',
+		alignItems: 'center'
 	},
 	title: {
 		fontSize: 14,
@@ -32,8 +34,7 @@ const styles = StyleSheet.create({
 		height: 9
 	},
 	upsideDown: {
-		transform: [{ scaleY: -1 }],
+		transform: [{ scaleY: -1 }]
-		marginTop: 4
 	}
 });
 
@@ -61,7 +62,12 @@ const Header = React.memo(({
 			<HeaderTitle connecting={connecting} isFetching={isFetching} theme={theme} />
 			<View style={styles.button}>
 				<Text style={[styles.server, { color: themes[theme].headerTintColor }]} numberOfLines={1}>{serverName}</Text>
-				<Image style={[styles.disclosure, showServerDropdown && styles.upsideDown]} source={{ uri: 'disclosure_indicator_server' }} />
+				<CustomIcon
+					name='chevron-down'
+					color={themes[theme].headerTintColor}
+					style={[showServerDropdown && styles.upsideDown]}
+					size={18}
+				/>
 			</View>
 		</TouchableOpacity>
 	</View>

app/views/RoomsListView/ListHeader/Directory.js

@@ -27,7 +27,7 @@ const Directory = React.memo(({ goDirectory, theme, searching }) => {
 					{ borderBottomWidth: StyleSheet.hairlineWidth, borderColor: themes[theme].separatorColor }
 				]}
 			>
-				<CustomIcon style={[styles.directoryIcon, color]} size={22} name='discover' />
+				<CustomIcon style={[styles.directoryIcon, color]} size={22} name='directory' />
 				<Text style={[styles.directoryText, color]}>{I18n.t('Directory')}</Text>
 				<DisclosureIndicator theme={theme} />
 			</View>

app/views/RoomsListView/ListHeader/Sort.js

@@ -29,7 +29,7 @@ const Sort = React.memo(({
 				]}
 			>
 				<Text style={[styles.sortToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Sorting_by', { key: I18n.t(sortBy === 'alphabetical' ? 'name' : 'activity') })}</Text>
-				<CustomIcon style={[styles.sortIcon, { color: themes[theme].auxiliaryText }]} size={22} name='sort' />
+				<CustomIcon style={[styles.sortIcon, { color: themes[theme].auxiliaryText }]} size={22} name='sort-az' />
 			</View>
 		</Touch>
 	);

app/views/RoomsListView/SortDropdown/index.js

@@ -138,13 +138,13 @@ class Sort extends PureComponent {
 						<View style={[styles.dropdownContainerHeader, { borderColor: themes[theme].separatorColor }]}>
 							<View style={styles.sortItemContainer}>
 								<Text style={[styles.sortToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Sorting_by', { key: I18n.t(sortBy === 'alphabetical' ? 'name' : 'activity') })}</Text>
-								<CustomIcon style={[styles.sortIcon, { color: themes[theme].auxiliaryText }]} size={22} name='sort' />
+								<CustomIcon style={[styles.sortIcon, { color: themes[theme].auxiliaryText }]} size={22} name='sort-az' />
 							</View>
 						</View>
 					</Touch>
 					<SortItemButton onPress={this.sortByName} theme={theme}>
 						<SortItemContent
-							icon='sort'
+							icon='sort-az'
 							label='Alphabetical'
 							checked={sortBy === 'alphabetical'}
 							theme={theme}
@@ -152,7 +152,7 @@ class Sort extends PureComponent {
 					</SortItemButton>
 					<SortItemButton onPress={this.sortByActivity} theme={theme}>
 						<SortItemContent
-							imageUri='sort_activity'
+							icon='clock'
 							label='Activity'
 							checked={sortBy === 'activity'}
 							theme={theme}
@@ -161,7 +161,7 @@ class Sort extends PureComponent {
 					<View style={[styles.sortSeparator, { backgroundColor: themes[theme].separatorColor }]} />
 					<SortItemButton onPress={this.toggleGroupByType} theme={theme}>
 						<SortItemContent
-							icon='sort-amount-down'
+							icon='group-by-type'
 							label='Group_by_type'
 							checked={groupByType}
 							theme={theme}

app/views/RoomsListView/index.js

@@ -114,7 +114,7 @@ class RoomsListView extends React.Component {
 				<CustomHeaderButtons left>
 					<Item
 						title='cancel'
-						iconName='cross'
+						iconName='Cross'
 						onPress={cancelSearch}
 					/>
 				</CustomHeaderButtons>
@@ -136,7 +136,7 @@ class RoomsListView extends React.Component {
 					) : null}
 					<Item
 						title='new'
-						iconName='edit-rounded'
+						iconName='new-chat'
 						onPress={() => navigation.navigate('NewMessageView')}
 						testID='rooms-list-view-create-channel'
 					/>

app/views/ShareListView/index.js

@@ -62,7 +62,7 @@ class ShareListView extends React.Component {
 			headerLeft: searching
 				? (
 					<CustomHeaderButtons left>
-						<Item title='cancel' iconName='cross' onPress={cancelSearch} />
+						<Item title='cancel' iconName='Cross' onPress={cancelSearch} />
 					</CustomHeaderButtons>
 				)
 				: (
@@ -441,7 +441,7 @@ class ShareListView extends React.Component {
 				}
 				<View style={[styles.container, styles.centered, { backgroundColor: themes[theme].auxiliaryBackground }]}>
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t(error)}</Text>
-					<CustomIcon name='circle-cross' size={120} color={themes[theme].dangerColor} />
+					<CustomIcon name='cancel' size={120} color={themes[theme].dangerColor} />
 					<Text style={[styles.fileMime, { color: themes[theme].titleText }]}>{ file.mime }</Text>
 				</View>
 			</View>

app/views/ShareView/index.js

@@ -155,7 +155,7 @@ class ShareView extends React.Component {
 			? <Image source={{ isStatic: true, uri: fileInfo.path }} style={styles.mediaImage} />
 			: (
 				<View style={styles.mediaIconContainer}>
-					<CustomIcon name='file-generic' style={styles.mediaIcon} />
+					<CustomIcon name='clip' style={styles.mediaIcon} />
 				</View>
 			);
 

app/views/SidebarView/index.js

@@ -167,7 +167,7 @@ class Sidebar extends Component {
 				{isAdmin ? (
 					<SidebarItem
 						text={I18n.t('Admin_Panel')}
-						left={<CustomIcon name='shield-alt' size={20} color={themes[theme].titleText} />}
+						left={<CustomIcon name='shield' size={20} color={themes[theme].titleText} />}
 						onPress={() => this.sidebarNavigate('AdminPanelView')}
 						testID='sidebar-settings'
 						current={activeItemKey === 'AdminPanelStack'}

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -12,6 +12,8 @@
 		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		1E0DBC59247D75C40086559B /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1E0DBC58247D75C40086559B /* custom.ttf */; };
+		1E0DBC5A247D75C40086559B /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1E0DBC58247D75C40086559B /* custom.ttf */; };
 		1E1EA80A2326CD2200E22452 /* AVFoundation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 1E1EA8092326CD2200E22452 /* AVFoundation.framework */; };
 		1E1EA80C2326CD2800E22452 /* AudioToolbox.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 1E1EA80B2326CD2800E22452 /* AudioToolbox.framework */; };
 		1E1EA80E2326CD2F00E22452 /* CoreGraphics.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 1E1EA80D2326CD2F00E22452 /* CoreGraphics.framework */; };
@@ -31,8 +33,6 @@
 		24A2AEF2383D44B586D31C01 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 06BB44DD4855498082A744AD /* libz.tbd */; };
 		50046CB6BDA69B9232CF66D9 /* libPods-RocketChatRN.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C235DC7B31A4D1578EDEF219 /* libPods-RocketChatRN.a */; };
 		7A006F14229C83B600803143 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 7A006F13229C83B600803143 /* GoogleService-Info.plist */; };
-		7A09EB0B2459BDD4003B433B /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A09EB0A2459BDD3003B433B /* custom.ttf */; };
-		7A09EB0C2459BDD4003B433B /* custom.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A09EB0A2459BDD3003B433B /* custom.ttf */; };
 		7A0D62D2242AB187006D5C06 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 7A0D62D1242AB187006D5C06 /* LaunchScreen.storyboard */; };
 		7AAA749E23043B1E00F1ADE9 /* Watermelon.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7AAA749D23043B1E00F1ADE9 /* Watermelon.swift */; };
 		7AC99C1C2339361F0000A0CB /* Watermelon.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7AAA749D23043B1E00F1ADE9 /* Watermelon.swift */; };
@@ -82,6 +82,7 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = RocketChatRN/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RocketChatRN/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RocketChatRN/main.m; sourceTree = "<group>"; };
+		1E0DBC58247D75C40086559B /* custom.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = custom.ttf; sourceTree = "<group>"; };
 		1E1EA8092326CD2200E22452 /* AVFoundation.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = AVFoundation.framework; path = System/Library/Frameworks/AVFoundation.framework; sourceTree = SDKROOT; };
 		1E1EA80B2326CD2800E22452 /* AudioToolbox.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = AudioToolbox.framework; path = System/Library/Frameworks/AudioToolbox.framework; sourceTree = SDKROOT; };
 		1E1EA80D2326CD2F00E22452 /* CoreGraphics.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreGraphics.framework; path = System/Library/Frameworks/CoreGraphics.framework; sourceTree = SDKROOT; };
@@ -102,7 +103,6 @@
 		60B2A6A31FC4588700BD58E5 /* RocketChatRN.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = RocketChatRN.entitlements; path = RocketChatRN/RocketChatRN.entitlements; sourceTree = "<group>"; };
 		66D6B1D0567051BE541450C9 /* Pods-RocketChatRN.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RocketChatRN.release.xcconfig"; path = "Pods/Target Support Files/Pods-RocketChatRN/Pods-RocketChatRN.release.xcconfig"; sourceTree = "<group>"; };
 		7A006F13229C83B600803143 /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = "<group>"; };
-		7A09EB0A2459BDD3003B433B /* custom.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = custom.ttf; sourceTree = "<group>"; };
 		7A0D62D1242AB187006D5C06 /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = LaunchScreen.storyboard; sourceTree = "<group>"; };
 		7AAA749C23043B1D00F1ADE9 /* RocketChatRN-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "RocketChatRN-Bridging-Header.h"; sourceTree = "<group>"; };
 		7AAA749D23043B1E00F1ADE9 /* Watermelon.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Watermelon.swift; sourceTree = "<group>"; };
@@ -235,7 +235,7 @@
 		AF5E16F0398347E6A80C8CBE /* Resources */ = {
 			isa = PBXGroup;
 			children = (
-				7A09EB0A2459BDD3003B433B /* custom.ttf */,
+				1E0DBC58247D75C40086559B /* custom.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -400,7 +400,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				7A09EB0B2459BDD4003B433B /* custom.ttf in Resources */,
+				1E0DBC59247D75C40086559B /* custom.ttf in Resources */,
 				7A006F14229C83B600803143 /* GoogleService-Info.plist in Resources */,
 				7A0D62D2242AB187006D5C06 /* LaunchScreen.storyboard in Resources */,
 			);
@@ -411,7 +411,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				1EDDE57A22DFAD8E0078F69D /* Images.xcassets in Resources */,
-				7A09EB0C2459BDD4003B433B /* custom.ttf in Resources */,
+				1E0DBC5A247D75C40086559B /* custom.ttf in Resources */,
 				1EC6ACB722CB9FC300A41C61 /* MainInterface.storyboard in Resources */,
 				1ED59D4C22CBA77D00C54289 /* GoogleService-Info.plist in Resources */,
 			);
@@ -841,7 +841,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/rn-extensions-share/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase/**",
-					"$PODS_CONFIGURATION_BUILD_DIR/Firebase",
+					$PODS_CONFIGURATION_BUILD_DIR/Firebase,
 				);
 				INFOPLIST_FILE = ShareRocketChatRN/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
@@ -907,7 +907,7 @@
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/rn-extensions-share/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase/**",
-					"$PODS_CONFIGURATION_BUILD_DIR/Firebase",
+					$PODS_CONFIGURATION_BUILD_DIR/Firebase,
 				);
 				INFOPLIST_FILE = ShareRocketChatRN/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;

ios/RocketChatRN/Images.xcassets/Icons/disclosure_indicator.imageset/Contents.json

@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "disclosure_indicator.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "disclosure_indicator@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "disclosure_indicator@3x.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

ios/RocketChatRN/Images.xcassets/Icons/disclosure_indicator_server.imageset/Contents.json

@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "disclosure_indicator_server.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "disclosure_indicator_server@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "disclosure_indicator_server@3x.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

ios/RocketChatRN/Images.xcassets/Icons/hashtag.imageset/Contents.json

@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "hashtag.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "hashtag@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "hashtag@3x.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

ios/RocketChatRN/Images.xcassets/Icons/livechat.imageset/Contents.json

@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "livechat.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "livechat@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "livechat@3x.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

ios/RocketChatRN/Images.xcassets/Icons/lock.imageset/Contents.json

@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "lock.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "lock@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "lock@3x.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

ios/RocketChatRN/Images.xcassets/Icons/sort_activity.imageset/Contents.json

@@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "sort_activity.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "sort_activity@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "sort_activity@3x.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}