feat(ui): Add file icons to release detail changed files
diff --git a/docs-ui/components/fileIcon.stories.js b/docs-ui/components/fileIcon.stories.js
new file mode 100644
index 0000000000000..1d1fa674c6865
--- /dev/null
+++ b/docs-ui/components/fileIcon.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+import {withInfo} from '@storybook/addon-info';
+import {text} from '@storybook/addon-knobs';
+
+import FileIcon from 'app/components/fileIcon';
+
+storiesOf('Style|Icons', module).add(
+  'FileIcon',
+  withInfo('Shows a platform icon for given filename - based on extension')(() => {
+    const fileName = text('fileName', 'src/components/testComponent.tsx');
+    const size = text('size', 'xl');
+
+    return (
+      <div>
+        <FileIcon fileName={fileName} size={size} />
+      </div>
+    );
+  })
+);
diff --git a/src/sentry/static/sentry/app/components/fileChange.tsx b/src/sentry/static/sentry/app/components/fileChange.tsx
index 428445e4641b4..eedf988f224bc 100644
--- a/src/sentry/static/sentry/app/components/fileChange.tsx
+++ b/src/sentry/static/sentry/app/components/fileChange.tsx
@@ -4,10 +4,10 @@ import styled from '@emotion/styled';
 
 import {ListGroupItem} from 'app/components/listGroup';
 import space from 'app/styles/space';
-import overflowEllipsis from 'app/styles/overflowEllipsis';
 import {AvatarUser} from 'app/types';
 import AvatarList from 'app/components/avatar/avatarList';
-import {IconFile} from 'app/icons';
+import FileIcon from 'app/components/fileIcon';
+import TextOverflow from 'app/components/textOverflow';
 
 type Props = {
   filename: string;
@@ -17,8 +17,8 @@ type Props = {
 const FileChange = ({filename, authors}: Props) => (
   <FileItem>
     <Filename>
-      <StyledIconFile size="xs" />
-      {filename}
+      <StyledFileIcon fileName={filename} />
+      <TextOverflow>{filename}</TextOverflow>
     </Filename>
     <div>
       <AvatarList users={authors} avatarSize={25} typeMembers="authors" />
@@ -39,12 +39,16 @@ const FileItem = styled(ListGroupItem)`
 
 const Filename = styled('div')`
   font-size: ${p => p.theme.fontSizeMedium};
-  ${overflowEllipsis}
+  display: grid;
+  grid-gap: ${space(1)};
+  margin-right: ${space(3)};
+  align-items: center;
+  grid-template-columns: max-content 1fr;
 `;
 
-const StyledIconFile = styled(IconFile)`
+const StyledFileIcon = styled(FileIcon)`
   color: ${p => p.theme.gray400};
-  margin-right: ${space(1)};
+  border-radius: 3px;
 `;
 
 export default FileChange;
diff --git a/src/sentry/static/sentry/app/components/fileIcon.tsx b/src/sentry/static/sentry/app/components/fileIcon.tsx
new file mode 100644
index 0000000000000..61967ab2c3b10
--- /dev/null
+++ b/src/sentry/static/sentry/app/components/fileIcon.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {IconFile} from 'app/icons';
+import theme from 'app/utils/theme';
+
+const FILE_EXTENSION_TO_ICON = {
+  jsx: 'react',
+  tsx: 'react',
+  js: 'javascript',
+  ts: 'javascript',
+  php: 'php',
+  py: 'python',
+  vue: 'vue',
+  go: 'go',
+  java: 'java',
+  perl: 'perl',
+  rb: 'ruby',
+  rs: 'rust',
+  rlib: 'rust',
+  swift: 'swift',
+  h: 'apple',
+  m: 'apple',
+  mm: 'apple',
+  M: 'apple',
+  cs: 'csharp',
+  ex: 'elixir',
+  exs: 'elixir',
+};
+
+type Props = {
+  fileName: string;
+  size?: string;
+  className?: string;
+};
+
+const FileIcon = ({fileName, size: providedSize = 'sm', className}: Props) => {
+  const fileExtension = fileName.split('.').pop();
+  const iconName = fileExtension ? FILE_EXTENSION_TO_ICON[fileExtension] : null;
+  const size = theme.iconSizes[providedSize] ?? providedSize;
+
+  if (!iconName) {
+    return <IconFile size={size} className={className} />;
+  }
+
+  return (
+    <img
+      src={require(`platformicons/svg/${iconName}.svg`)}
+      width={size}
+      height={size}
+      className={className}
+    />
+  );
+};
+
+export default FileIcon;

Before:
![image](https://user-images.githubusercontent.com/9060071/83862781-b4119800-a722-11ea-9f46-0f8769ebc406.png)

After:
![image](https://user-images.githubusercontent.com/9060071/83862811-bd9b0000-a722-11ea-8d2f-bc392d9c5706.png)
