diff --git a/custom-icons.js b/custom-icons.js
new file mode 100644
index 000000000..dbd806f10
--- /dev/null
+++ b/custom-icons.js
@@ -0,0 +1,47 @@
+import {
+  ClassicBus,
+  ClassicGondola,
+  ClassicModeIcon,
+  Ferry,
+  LegIcon,
+  StandardGondola
+} from '@opentripplanner/icons'
+
+/**
+ * For more advanced users, you can replicate and customize components and
+ * observe the change in icons.
+ * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
+ * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
+ * The example below shuffles some icons around from what you might normally
+ * expect for demonstration purposes.
+ */
+
+const CustomTransitIcon = Ferry
+const CustomRailIcon = ClassicGondola
+const CustomStreetcarIcon = StandardGondola
+const CustomBikeRentalIcon = ClassicBus
+
+export const CustomModeIcon = ({ mode, ...props }) => {
+  if (!mode) return null
+  switch (mode.toLowerCase()) {
+    // Place custom icons for each mode here.
+    case 'transit':
+      return <CustomTransitIcon {...props} />
+    case 'rail':
+      return <CustomRailIcon {...props} />
+    default:
+      return <ClassicModeIcon mode={mode} {...props} />
+  }
+}
+
+export const CustomLegIcon = ({ leg, ...props }) => {
+  if (
+    leg.routeLongName &&
+    leg.routeLongName.startsWith('MAX')
+  ) {
+    return <CustomStreetcarIcon />
+  } else if (leg.rentedBike) {
+    return <CustomBikeRentalIcon />
+  }
+  return <LegIcon leg={leg} ModeIcon={CustomModeIcon} {...props} />
+}
diff --git a/example.js b/example.js
index 72f5ac230..3d6530aa6 100644
--- a/example.js
+++ b/example.js
@@ -1,6 +1,7 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
 
+import {ClassicLegIcon, ClassicModeIcon} from '@opentripplanner/icons'
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import React, { Component } from 'react'
@@ -9,7 +10,6 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
-
 // import Bootstrap Grid components for layout
 import { Navbar, Grid, Row, Col } from 'react-bootstrap'
 
@@ -22,10 +22,23 @@ import {
   AppMenu,
   createOtpReducer
 } from './lib'
-
 // load the OTP configuration
 import otpConfig from './config.yml'
 
+// Set useCustomIcons to true to override classic icons with the exports from
+// custom-icons.js
+const useCustomIcons = false
+
+// Define icon sets for modes.
+let MyLegIcon = ClassicLegIcon
+let MyModeIcon = ClassicModeIcon
+
+if (useCustomIcons) {
+  const CustomIcons = require('./custom-icons')
+  MyLegIcon = CustomIcons.CustomLegIcon
+  MyModeIcon = CustomIcons.CustomModeIcon
+}
+
 // create an initial query for demo/testing purposes
 const initialQuery = {
   from: {
@@ -78,7 +91,7 @@ class OtpRRExample extends Component {
         <Grid>
           <Row className='main-row'>
             <Col sm={6} md={4} className='sidebar'>
-              <DefaultMainPanel />
+              <DefaultMainPanel LegIcon={MyLegIcon} ModeIcon={MyModeIcon} />
             </Col>
             <Col sm={6} md={8} className='map-container'>
               <Map />
@@ -90,7 +103,12 @@ class OtpRRExample extends Component {
 
     /** mobile view **/
     const mobileView = (
-      <MobileMain map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
+      <MobileMain
+        LegIcon={MyLegIcon}
+        ModeIcon={MyModeIcon}
+        map={<Map />}
+        title={<div className='navbar-title'>OpenTripPlanner</div>}
+      />
     )
 
     /** the main webapp **/
@@ -98,6 +116,7 @@ class OtpRRExample extends Component {
       <ResponsiveWebapp
         desktopView={desktopView}
         mobileView={mobileView}
+        LegIcon={MyLegIcon}
       />
     )
   }
diff --git a/lib/components/app/default-main-panel.js b/lib/components/app/default-main-panel.js
index ed3de24b6..e200c01ef 100644
--- a/lib/components/app/default-main-panel.js
+++ b/lib/components/app/default-main-panel.js
@@ -14,10 +14,11 @@ class DefaultMainPanel extends Component {
     const {
       activeSearch,
       currentQuery,
-      customIcons,
       itineraryClass,
       itineraryFooter,
+      LegIcon,
       mainPanelContent,
+      ModeIcon,
       showUserSettings
     } = this.props
     const showPlanTripButton = mainPanelContent === 'EDIT_DATETIME' ||
@@ -35,7 +36,7 @@ class DefaultMainPanel extends Component {
           paddingBottom: 15,
           overflow: 'auto'
         }}>
-          <DefaultSearchForm icons={customIcons} />
+          <DefaultSearchForm ModeIcon={ModeIcon} />
           {!activeSearch && !showPlanTripButton && showUserSettings &&
             <UserSettings />
           }
@@ -43,7 +44,8 @@ class DefaultMainPanel extends Component {
             <NarrativeRoutingResults
               itineraryClass={itineraryClass}
               itineraryFooter={itineraryFooter}
-              customIcons={customIcons} />
+              LegIcon={LegIcon}
+            />
           </div>
         </div>
         {showPlanTripButton &&
diff --git a/lib/components/app/print-layout.js b/lib/components/app/print-layout.js
index 724db3ee3..c140345d8 100644
--- a/lib/components/app/print-layout.js
+++ b/lib/components/app/print-layout.js
@@ -1,4 +1,3 @@
-import { TriMetLegIcon } from '@opentripplanner/icons'
 import PrintableItinerary from '@opentripplanner/printable-itinerary'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -14,6 +13,7 @@ import { getActiveItinerary } from '../../util/state'
 class PrintLayout extends Component {
   static propTypes = {
     itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired,
     parseQueryString: PropTypes.func
   }
 
@@ -52,24 +52,8 @@ class PrintLayout extends Component {
     root.removeAttribute('class')
   }
 
-  /**
-   * Use one of the customIcons if provided,
-   * (similar to @opentriplanner/trip-form/ModeIcon)
-   * otherwise, fall back on TriMetLegIcon.
-   * TODO: Combine all custom icon rendering in one place.
-   */
-  customLegIcon = icons => {
-    return function ({leg, props}) {
-      // Check if there is a custom icon (exact match required).
-      if (icons && leg.mode in icons) {
-        return icons[leg.mode]
-      }
-      return TriMetLegIcon({leg, props})
-    }
-  }
-
   render () {
-    const { config, customIcons, itinerary } = this.props
+    const { config, itinerary, LegIcon } = this.props
     return (
       <div className='otp print-layout'>
         {/* The header bar, including the Toggle Map and Print buttons */}
@@ -99,7 +83,7 @@ class PrintLayout extends Component {
             <PrintableItinerary
               config={config}
               itinerary={itinerary}
-              LegIcon={this.customLegIcon(customIcons)}
+              LegIcon={LegIcon}
             />
             <TripDetails itinerary={itinerary} />
           </>
diff --git a/lib/components/form/connected-settings-selector-panel.js b/lib/components/form/connected-settings-selector-panel.js
index ffa4122e1..6d4f1d030 100644
--- a/lib/components/form/connected-settings-selector-panel.js
+++ b/lib/components/form/connected-settings-selector-panel.js
@@ -12,13 +12,13 @@ import UserTripSettings from './user-trip-settings'
 
 class ConnectedSettingsSelectorPanel extends Component {
   static propTypes = {
-    icons: PropTypes.object
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   render () {
     const {
       config,
-      icons,
+      ModeIcon,
       query,
       setQueryParam,
       showUserSettings
@@ -30,8 +30,7 @@ class ConnectedSettingsSelectorPanel extends Component {
           {showUserSettings && <UserTripSettings />}
 
           <StyledSettingsSelectorPanel
-            className='settings-selector-panel'
-            icons={icons}
+            ModeIcon={ModeIcon}
             queryParams={query}
             supportedModes={config.modes}
             supportedCompanies={config.companies}
diff --git a/lib/components/form/default-search-form.js b/lib/components/form/default-search-form.js
index 98be08f8a..64dde53d2 100644
--- a/lib/components/form/default-search-form.js
+++ b/lib/components/form/default-search-form.js
@@ -4,16 +4,14 @@ import React, { Component } from 'react'
 import LocationField from './connected-location-field'
 import TabbedFormPanel from './tabbed-form-panel'
 import SwitchButton from './switch-button'
-import defaultIcons from '../icons'
 
 export default class DefaultSearchForm extends Component {
   static propTypes = {
-    icons: PropTypes.object,
-    mobile: PropTypes.bool
+    mobile: PropTypes.bool,
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   static defaultProps = {
-    icons: defaultIcons,
     showFrom: true,
     showTo: true
   }
@@ -27,7 +25,7 @@ export default class DefaultSearchForm extends Component {
   }
 
   render () {
-    const { icons, mobile } = this.props
+    const { mobile, ModeIcon } = this.props
     const actionText = mobile ? 'tap' : 'click'
 
     return (
@@ -50,7 +48,7 @@ export default class DefaultSearchForm extends Component {
           </div>
         </div>
 
-        <TabbedFormPanel icons={icons} />
+        <TabbedFormPanel ModeIcon={ModeIcon} />
       </div>
     )
   }
diff --git a/lib/components/form/settings-preview.js b/lib/components/form/settings-preview.js
index 337c5d2b6..b39baeda6 100644
--- a/lib/components/form/settings-preview.js
+++ b/lib/components/form/settings-preview.js
@@ -10,7 +10,6 @@ class SettingsPreview extends Component {
     caret: PropTypes.string,
     compressed: PropTypes.bool,
     editButtonText: PropTypes.element,
-    icons: PropTypes.object,
     showCaret: PropTypes.bool,
     onClick: PropTypes.func,
 
diff --git a/lib/components/form/styled.js b/lib/components/form/styled.js
index 0ff6705a9..3d0909694 100644
--- a/lib/components/form/styled.js
+++ b/lib/components/form/styled.js
@@ -7,139 +7,141 @@ const commonButtonCss = css`
   -moz-user-select: none;
   -ms-user-select: none;
   background: none;
+  border: 1px solid rgb(187, 187, 187);
+  border-radius: 3px;
   font-family: inherit;
-  user-select: none;
+  font-size: inherit;
+  font-weight: inherit;
+  outline-offset: -2px;
+  padding: 6px 12px;
   text-align: center;
   touch-action: manipulation;
+  user-select: none;
+
+  &.active {
+    background-color: rgb(173, 216, 230);
+    border: 2px solid rgb(0, 0, 0);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    font-weight: 600;
+  }
 `
 
 const commonInputCss = css`
-  background-color: #fff;
+  background: none;
   border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   color: #555;
   font-family: inherit;
+  font-weight: inherit;
   padding: 6px 12px;
-  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-
-  &:focus {
-    border-color: #66afe9;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-    outline: 0;
-  }
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 `
 
 const modeButtonButtonCss = css`
   ${TripFormClasses.ModeButton.Button} {
     ${commonButtonCss}
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    color: #333;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 1.42857143;
-    outline-offset:-2px;
-    padding: 6px 12px;
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-    }
-    &:hover {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-    }
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-      &:hover {
-        background-color: #d4d4d4;
-        border-color: #8c8c8c;
-      }
-    }
   }
 `
 
 export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
+  ${modeButtonButtonCss}
+
   ${TripFormClasses.SettingLabel} {
-    font-weight: 400;
-    margin-bottom: 0;
+    color: #808080;
+    font-size: 14px;
+    font-weight: 100;
+    letter-spacing: 1px;
+    padding-top: 8px;
+    text-transform: uppercase;
   }
   ${TripFormClasses.SettingsHeader} {
+    color: #333333;
     font-size: 18px;
-    margin: 16px 0px;    
+    margin: 16px 0px;
   }
   ${TripFormClasses.SettingsSection} {
     margin-bottom: 16px;
   }
   ${TripFormClasses.DropdownSelector} {
-    margin-bottom:20px;
     select {
       ${commonInputCss}
+      -webkit-appearance: none;
+      border-radius: 3px;
       font-size: 14px;
       height: 34px;
-      line-height: 1.42857143;
+      line-height: 1.42857;
+      margin-bottom: 20px;
+
+      &:focus {
+        border-color: #66afe9;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+        outline: 0;
+      }
+    }
+    > div:last-child::after {
+      box-sizing: border-box;
+      color: #000;
+      content: "▼";
+      font-size: 67%;
+      pointer-events: none;
+      position: absolute;
+      right: 8px;
+      top: 10px;
     }
   }
 
   ${TripFormClasses.ModeSelector} {
+    font-weight: 300;
     ${TripFormClasses.ModeButton.Button} {
-      ${commonButtonCss}
-      border: 1px solid rgb(187, 187, 187);
-      border-radius: 3px;
       box-shadow: none;
-      outline: 0;
+      outline: none;
       padding: 3px;
-      &.active {
-        background-color: rgb(173, 216, 230);
-        border: 2px solid rgb(0, 0, 0);
-      }
-    }
+    }  
     ${TripFormClasses.ModeButton.Title} {
       font-size: 10px;
-      font-weight: 300;
       line-height: 12px;
       padding: 4px 0px 0px;
+  
       &.active {
         font-weight: 600;
       }
-    }
+    }  
   }
   ${TripFormClasses.ModeSelector.MainRow} {
-    margin: 0 -10px 18px;
-    padding: 0 5px;
-    
+    box-sizing: border-box;
+    font-size: 170%;
+    margin: 0px -10px 18px;
+    padding: 0px 5px;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 200%;
-      font-weight: 300;
       height: 54px;
+      width: 100%;
       &.active {
         font-weight: 600;
       }  
     }
   }
   ${TripFormClasses.ModeSelector.SecondaryRow} {
-    margin: 0 -10px 10px;
+    margin: 0px -10px 10px;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 150%;
-      font-weight: 600;
+      font-size: 130%;
+      font-weight: 800;
       height: 46px;
+      > svg {
+        margin: 0 0.20em;
+      }
     }
   }
   ${TripFormClasses.ModeSelector.TertiaryRow} {
-    margin: 0 -10px 10px;
+    font-size: 80%;
+    font-weight: 300;
+    margin: 0px -10px 10px;
+    text-align: center;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 90%;
       height: 36px;
     }
   }
-
   ${TripFormClasses.SubmodeSelector.Row} {
+    font-size: 12px;
     > * {
       padding: 3px 5px 3px 0px;
     }
@@ -147,38 +149,46 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
       padding-right: 0px;
     }
     ${TripFormClasses.ModeButton.Button} {
-      padding: 6px 12px;
+      height: 35px;
     }
     svg,
     img {
       margin-left: 0px;
     }
   }
+  ${TripFormClasses.SubmodeSelector} {
+    ${TripFormClasses.SettingLabel} {
+      margin-bottom: 0;
+    }
+  }
   ${TripFormClasses.SubmodeSelector.InlineRow} {
     margin: -3px 0px;
-  }
-
-  ${TripFormClasses.SubmodeSelector} {
-      ${modeButtonButtonCss}
+    svg,
+    img {
+      height: 18px;
+      max-width: 32px;
+    }
   }
 `
 
 export const StyledDateTimeSelector = styled(DateTimeSelector)`
-  margin: 0 -15px 20px;
+  margin: 0 -15px 15px;
+
   ${TripFormClasses.DateTimeSelector.DateTimeRow} {
-    margin-top: 20px;
+    margin: 20px 0px 15px;
+    input {
+      ${commonInputCss}
+      background-color: #fff;
+      border: 0;
+      border-bottom: 1px solid #000;
+      box-shadow: none;
+      outline: none;
+      text-align: center;
+    }
   }
-
-  input {
-    ${commonInputCss}
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    box-shadow: none;
-    font-size: 16px;
-    height: 34px;
-    text-align: center; /* For legacy browsers. */
+  ${TripFormClasses.ModeButton.Button} {
+    ${commonButtonCss}
+    font-size: 14px;
+    height: 35px;
   }
-
-  ${modeButtonButtonCss}
 `
diff --git a/lib/components/form/tabbed-form-panel.js b/lib/components/form/tabbed-form-panel.js
index c41c5650d..2452eadb4 100644
--- a/lib/components/form/tabbed-form-panel.js
+++ b/lib/components/form/tabbed-form-panel.js
@@ -12,7 +12,7 @@ import { setMainPanelContent } from '../../actions/ui'
 
 class TabbedFormPanel extends Component {
   static propTypes = {
-    icons: PropTypes.object
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   _onEditDateTimeClick = () => {
@@ -28,7 +28,7 @@ class TabbedFormPanel extends Component {
   _onHideClick = () => this.props.setMainPanelContent(null)
 
   render () {
-    const { icons, mainPanelContent } = this.props
+    const { ModeIcon, mainPanelContent } = this.props
 
     return (
       <div className='tabbed-form-panel'>
@@ -49,7 +49,7 @@ class TabbedFormPanel extends Component {
         {(mainPanelContent === 'EDIT_DATETIME' || mainPanelContent === 'EDIT_SETTINGS') && (
           <div className='active-panel'>
             {mainPanelContent === 'EDIT_DATETIME' && (<DateTimeModal />)}
-            {mainPanelContent === 'EDIT_SETTINGS' && (<ConnectedSettingsSelectorPanel icons={icons} />)}
+            {mainPanelContent === 'EDIT_SETTINGS' && (<ConnectedSettingsSelectorPanel ModeIcon={ModeIcon} />)}
             <div className='hide-button-row'>
               <Button className='hide-button clear-button-formatting' onClick={this._onHideClick}>
                 <i className='fa fa-caret-up' /> Hide Settings
diff --git a/lib/components/icons/bike-icon.js b/lib/components/icons/bike-icon.js
deleted file mode 100644
index c97d0de98..000000000
--- a/lib/components/icons/bike-icon.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { Component } from 'react'
-
-export default class BikeIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <g>
-          <path d='M6.9,15.4c-3.8,0-6.9,3.1-6.9,6.9c0,3.8,3.1,6.9,6.9,7c3.8,0,6.9-3.1,6.9-7C13.9,18.6,10.8,15.5,6.9,15.4z M10.7,26.1 c-0.9,1-2.3,1.6-3.7,1.6c-1.4,0-2.8-0.6-3.7-1.6c-0.9-0.9-1.5-2.3-1.5-3.7c0-1.4,0.6-2.8,1.5-3.7c1-1,2.3-1.5,3.7-1.5 c1.4,0,2.8,0.6,3.7,1.5c1,0.9,1.5,2.3,1.5,3.7C12.2,23.8,11.6,25.2,10.7,26.1z' />
-          <path d='M19.2,7.7c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5c-1.4,0-2.5,1.1-2.5,2.5C16.7,6.6,17.8,7.7,19.2,7.7z' />
-          <path d='M23.9,13.9c1.5,0,1.5-2-0.1-2h-4l-2.8-4.6c-0.6-0.8-2.3-0.9-3-0.1l-4.9,4.9C8,13.3,8.7,15,10,15.4l4.5,2.8v4.6 c0,1,0.8,1.6,1.5,1.6c0.7,0,1.5-0.5,1.5-1.6V17c0-0.5-0.1-1.2-0.5-1.3l-3-1.9l2.5-2.6l1.5,2c0.3,0.6,0.9,0.8,1.5,0.8H23.9z' />
-          <g>
-            <path d='M25.1,15.3c-3.8,0-6.9,3.1-6.9,6.9c0,3.8,3.1,6.9,6.9,6.9c3.8,0,6.9-3.1,6.9-6.9C32,18.5,28.9,15.3,25.1,15.3z M28.8,26 c-0.9,0.9-2.3,1.5-3.7,1.5c-1.4,0-2.8-0.6-3.7-1.5c-0.9-1-1.5-2.3-1.5-3.7c0-1.5,0.6-2.8,1.5-3.7c1-1,2.3-1.5,3.7-1.5 c1.5,0,2.8,0.6,3.7,1.5c1,1,1.5,2.3,1.5,3.7C30.3,23.7,29.7,25,28.8,26z' />
-          </g>
-        </g>
-      </svg>
-
-    )
-  }
-}
diff --git a/lib/components/icons/biketown-icon.js b/lib/components/icons/biketown-icon.js
deleted file mode 100644
index 50fcefac7..000000000
--- a/lib/components/icons/biketown-icon.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { Component } from 'react'
-
-export default class BiketownIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 418.62 160.29' height='100%' width='100%'>
-        <path d='M230.91,500.07c-6.66,1.79-12,1.53-15.08-.71-7.84-5.72-1.89-17.25.27-20.68a103,103,0,0,0-10.64,13c-4.68,7.2-6.68,15.07-3.52,20.13,5.69,9.12,19.32,4.91,28,1.25l80.66-34Z' transform='translate(-37 -357)' />
-        <path d='M37,431.27V357H61.88q14,0,20.68,5.77a19.31,19.31,0,0,1,6.83,15.29q0,14-14.78,15.11Q83,394.33,87,398.37T90.87,410q0,9.58-6.62,15.39T67,431.27H37Zm21.4-46h1.44a9.84,9.84,0,0,0,6.08-1.68,5.57,5.57,0,0,0,2.23-4.71q0-6.44-7.54-6.45h-0.9l-1.31.07v12.78h0Zm0,30.25,1.08,0.08h0.77a9.55,9.55,0,0,0,6.39-2A6.76,6.76,0,0,0,69,408.18a6.47,6.47,0,0,0-2.38-5.33,10.12,10.12,0,0,0-6.55-1.93H58.4v14.61h0Z' transform='translate(-37 -357)' />
-        <rect x='56.7' width='21.4' height='74.27' />
-        <polygon points='141 74.27 117.92 74.27 103.7 40.02 104.27 74.27 82.87 74.27 82.87 0 104.27 0 103.7 31.84 116.33 0 138.9 0 121.81 35.84 141 74.27' />
-        <path d='M315.73,394.39q0,16.4-8.26,26.66a26.16,26.16,0,0,1-21.39,10.22A28.29,28.29,0,0,1,266,423.42q-10.5-9.94-10.5-29.82,0-19,11-29.12A27.67,27.67,0,0,1,285.82,357q13.7,0,21.81,10.12t8.11,27.26m-22.22.17q0-19.76-7.59-19.76-3.79,0-6.05,5.19-2.21,4.81-2.21,14.15t2.08,14.27q2.08,5.07,5.77,5.07t5.85-5q2.15-5,2.15-13.91' transform='translate(-37 -357)' />
-        <path d='M383.26,431.27h-20.7l-5-26q-1.45-7.55-2.18-13.08-0.36-2.74-.62-4.57c-0.18-1.22-.29-2.15-0.36-2.79q-0.26,2-.77,7.36-0.24,2.74-.56,5.77t-0.8,6.4l-3.71,26.93h-20L310.92,357h21.14l3.49,20.44q2,12.22,2.77,19.19l0.68,6.79,0.67-5.82q1-10.2,2.68-19.39L346.24,357H364l3.47,17.85q2.53,12.45,4.35,29.48,0.57-7.65,1.23-13.56T374.54,380l3.9-23h20.88Z' transform='translate(-37 -357)' />
-        <path d='M399.69,431.27V357H420.1l10.73,26.07,2,5.29q1.13,3,2.44,6.88l2.21,6.54q-1.18-9.67-1.79-16.55T435,373.69V357h20.62v74.27H435L423.61,404q-1.8-4.38-3.24-8.2t-2.53-7.29q1.28,7.84,1.87,13.66a101.82,101.82,0,0,1,.59,10.2v19H399.69v-0.05Z' transform='translate(-37 -357)' />
-        <polygon points='140.86 0 140.86 74.27 180.62 74.27 180.62 56.47 162.25 56.47 162.25 45.07 178.72 45.07 178.72 27.27 162.25 27.27 162.25 17.8 189.71 17.8 189.71 74.27 211.1 74.27 211.1 17.8 223.37 17.8 223.37 0 140.86 0' />
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/bus-icon.js b/lib/components/icons/bus-icon.js
deleted file mode 100644
index 64bbcaf71..000000000
--- a/lib/components/icons/bus-icon.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { Component } from 'react'
-
-export default class BusIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <g>
-          <g>
-            <g>
-              <path d='M19.9,14.4c-1.1,0-2,0.7-2.3,1.7c0.3,0,4.3,0,4.6,0C21.9,15.1,21,14.4,19.9,14.4z' />
-              <path d='M26.9,7c-0.2-0.7-0.5-1.4-1.2-1.8c-5.2-2.7-14.4-2.6-19.1,0C6.2,5.5,5.4,6.1,5.1,7c-0.4,1.5-0.6,3-0.6,3.7l0,5.7l0,2.2 v6.1c0,0.2,0.2,0.3,0.4,0.3h22.3c0.2,0,0.3-0.1,0.3-0.3v-5.2l0-8.9C27.5,9.7,27.3,8.1,26.9,7z M11,4.9h9.9V6H11V4.9z M7.9,21.4 c-1,0-1.8-0.8-1.8-1.8c0-0.5,0.2-0.9,0.5-1.3C7,18,7.5,17.8,7.9,17.8c1,0,1.8,0.8,1.8,1.8C9.7,20.6,8.9,21.4,7.9,21.4z M24,21.4 c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C25.8,20.6,25,21.4,24,21.4z M25.2,16.4H6.5C6.2,16.4,6,16,6,15.8 l0.5-7.9c0-0.4,0.3-0.8,0.8-0.8h17.4c0.2,0,0.7,0.5,0.7,1l0.6,7.7C26,16.1,25.6,16.4,25.2,16.4z' />
-            </g>
-            <g>
-              <path d='M6.5,27.6c0,0.8,0.8,1.2,1.6,1.2c0.4,0,0.8-0.1,1-0.3c0.3-0.2,0.4-0.5,0.4-0.9c0,0,0-1.7,0-1.9c-0.2,0-2.8,0-3,0 C6.5,25.9,6.5,27.6,6.5,27.6z' />
-              <path d='M22.3,27.6c0,0.8,0.8,1.1,1.6,1.1c0.8,0,1.6-0.4,1.6-1.1c0,0,0-1.7,0-1.8c-0.2,0-3.1,0-3.2,0 C22.3,25.9,22.3,27.6,22.3,27.6z' />
-            </g>
-          </g>
-        </g>
-      </svg>
-
-    )
-  }
-}
diff --git a/lib/components/icons/car2go-icon.js b/lib/components/icons/car2go-icon.js
deleted file mode 100644
index fe4c01f3d..000000000
--- a/lib/components/icons/car2go-icon.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-
-export default class Car2goIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 1024 672' height='100%' width='100%'>>
-        <path id='path7755' d='M92.5,0C45.8,0,0,45.8,0,92.5v124.3c0,46.7,45.8,92.5,92.5,92.5h216.8v-60.6H92.5c-30.6,0-31.8-28.6-31.9-31.9V92.5c0-3.2,1.2-31.9,31.9-31.9h216.8V0H92.5z' />
-        <path id='path7759' d='M92.5,362.7C19.3,362.7,0,423.2,0,455.2v9.6h60.5l0.1-9.5c0-3.3,1.2-31.9,31.9-31.9h125.6c25.3,0,30.6,17.4,30.6,31.9c0,21.4-10.4,31.9-31.9,31.9H93.8C45.6,487.1,0,533,0,581.5V672h309.3v-60.6H60.6v-29.9c0-3.4,1.2-33.8,31.9-33.8h124.4c47.5,0,92.5-44.9,92.5-92.5c0-49.3-42.9-92.5-91.8-92.5H92.5z' />
-        <path id='path7763' d='M576.1,0H451.8c-46.7,0-92.5,45.8-92.5,92.5v216.8h60.6v-82.9H608v82.9h60.6V92.5C668.6,45.8,622.8,0,576.1,0M608,165.8H419.9V92.5c0-16.1,15.8-31.9,31.9-31.9h124.4c16.7,0,31.9,15.2,31.9,31.9V165.8z' />
-        <path id='path7767' d='M451.8,362.7c-46.7,0-92.5,45.5-92.5,91.8v125.6c0,46.3,45.8,91.8,92.5,91.8h216.8V487.1h-185v60H608v64.4H451.8c-30.8,0-32.4-27.6-32.5-30.8V455.2c0-3.2,1.2-31.9,31.9-31.9h217.5v-60.6H451.8z' />
-        <path id='path7771' d='M998.9,156.1c11.7-10.9,29-32.2,29-63.6C1027.9,45.8,982,0,935.4,0H718.6v309.3h60.6V185h156.2c30.6,0,31.8,28.6,31.9,31.9v92.4h60.6v-91.9C1027.9,185.8,1010.7,166.1,998.9,156.1 M934.1,124.4H779.2V60.6h156.2c30.6,0,31.8,28.6,31.9,31.9C967.1,95.4,965,124.4,934.1,124.4' />
-        <path id='path7775' d='M935.4,362.7H811c-46.7,0-92.5,45.8-92.5,92.5v124.3c0,46.7,45.8,92.5,92.5,92.5h124.3c46.7,0,92.5-45.8,92.5-92.5V455.2C1027.8,408.5,982,362.7,935.4,362.7 M967.2,579.5c0,30.7-28.7,31.8-31.9,31.9H811c-3.2-0.1-31.9-1.2-31.9-31.9V455.2c0-30.6,28.6-31.8,31.9-31.9h124.3c3.2,0.1,31.9,1.3,31.9,31.9V579.5z' />
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/direction-icon.js b/lib/components/icons/direction-icon.js
deleted file mode 100644
index 3203d1e1c..000000000
--- a/lib/components/icons/direction-icon.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { Component } from 'react'
-
-export default class DirectionIcon extends Component {
-  render () {
-    const { relativeDirection } = this.props
-    if (!relativeDirection) return null
-    switch (relativeDirection.toUpperCase()) {
-      case 'DEPART':
-      case 'CONTINUE': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path id='path5143' d='M100.5,110.5v150h60v-150h40l-70-110-70,110h40Z' />
-        </svg>
-      )
-      case 'LEFT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M374.5,100.5h60v160h60V90.5c0-30-20-50-50-50h-70V0.5l-100,69.14,100,70.86v-40Z' transform='translate(-260 0)' />
-        </svg>
-      )
-      case 'RIGHT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M406.5,140.5l100-70.86L406.5,0.5v40h-70c-30,0-50,20-50,50v170h60v-160h60v40Z' transform='translate(-260)' />
-        </svg>
-      )
-      case 'SLIGHTLY_LEFT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M346.5,350.5l40,40c10,10,20,20,20,40v90h60v-90c0-40-20-60-40-80l-40-40,30-30-120-20,20,120Z' transform='translate(-260 -260)' />
-        </svg>
-      )
-      case 'SLIGHTLY_RIGHT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M464.5,380.5l20-120-120,20,30,30-40,40c-20,20-40,40-40,80v90h60v-90c0-20,10-30,20-40l40-40Z' transform='translate(-260 -260)' />
-        </svg>
-      )
-      case 'HARD_LEFT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M592.5,360.5l50-50c40-40,110-20,110,50v160h-60v-160c0-10,0-20-10-10l-50,50,30,30-120,20,20-120Z' transform='translate(-520 -260)' />
-        </svg>
-      )
-      case 'HARD_RIGHT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M738.5,330.5l20,120-120-20,30-30-50-50c-10-10-10,0-10,10v160h-60v-160c0-70,70-90,110-50l50,50Z' transform='translate(-520 -260)' />
-        </svg>
-      )
-      case 'UTURN_LEFT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M628.5,120.5v-20c0-34.81,3.93-40.31,35.36-40s34.64,4.46,34.64,40v160h60v-160c0-74.12-22.85-97.25-94.64-97.5S568.5,25,568.5,100.5v20h-40l70,100,70-100h-40Z' transform='translate(-520)' />
-        </svg>
-      )
-      case 'UTURN_RIGHT': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M632.5,120.5l70,100,70-100h-40v-20C732.5,25,708.93,2.75,637.14,3S542.5,26.38,542.5,100.5v160h60v-160c0-35.54,3.21-39.69,34.64-40s35.36,5.19,35.36,40v20h-40Z' transform='translate(-520 0)' />
-        </svg>
-      )
-      case 'CIRCLE_CLOCKWISE': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <linearGradient id='gradient' x1='160.77' y1='640.4' x2='220.77' y2='580.4' gradientTransform='translate(320.5 1250.14) rotate(180)' gradientUnits='userSpaceOnUse'>
-            <stop offset='0%' style={{ stopColor: '#aaa', stopOpacity: 1 }} />
-            <stop offset='100%' style={{ stopColor: '#aaa', stopOpacity: 0 }} />
-          </linearGradient>
-          <path d='M30.5,640.5h60a40,40,0,0,1,80,0c0,20.22-10.51,37.32-30,40,15,5,25,20,25,50,37.37-14.48,65-47.51,65-90A100,100,0,0,0,30.5,640.5Z' transform='translate(0 -520)' fill='url(#gradient)' />
-          <path d='M0.5,660.5h32a100.12,100.12,0,0,0,68,75.41V780.5h60v-60c0-20-15-40-40-40-10.05,0-20.09-8-25.62-20H120.5l-60-60Z' transform='translate(0 -520)' />
-        </svg>
-      )
-      case 'CIRCLE_COUNTERCLOCKWISE': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <linearGradient id='gradient' x1='160.77' y1='640.4' x2='220.77' y2='580.4' gradientTransform='matrix(1, 0, 0, -1, -59.5, 1250.14)' gradientUnits='userSpaceOnUse'>
-            <stop offset='0%' style={{ stopColor: '#aaa', stopOpacity: 1 }} />
-            <stop offset='100%' style={{ stopColor: '#aaa', stopOpacity: 0 }} />
-          </linearGradient>
-          <path d='M130.5,540.5a100,100,0,0,0-100,100c0,42.49,27.63,75.52,65,90,0-30,10-45,25-50-19.49-2.68-30-19.78-30-40a40,40,0,0,1,80,0h60A100,100,0,0,0,130.5,540.5Z' transform='translate(0 -520)' fill='url(#gradient)' />
-          <path d='M200.5,600.5l-60,60h25.63c-5.54,12-15.57,20-25.62,20-25,0-40,20-40,40v60h60V735.91a100.12,100.12,0,0,0,68-75.41h32Z' transform='translate(0 -520)' />
-        </svg>
-      )
-      case 'ELEVATOR': return (
-        <svg viewBox='0 0 261 261' height='100%' width='100%'>
-          <path d='M376.93,520.5v43.28H340.41a36.79,36.79,0,0,0-36.72,36.72v140a36.77,36.77,0,0,0,36.72,36.69h100a36.74,36.74,0,0,0,36.69-36.69v-140a36.77,36.77,0,0,0-36.69-36.72H404.79V520.5H376.93Zm-32.52,60.69h92a23.1,23.1,0,0,1,23.28,23.31v132a23.08,23.08,0,0,1-23.28,23.28h-92a23.1,23.1,0,0,1-23.31-23.28v-132A23.13,23.13,0,0,1,344.41,581.19Zm1,24.31v75h-20l35.06,60,34.94-60h-20v-75h-30Zm75.06-5-35.06,60h20v75h30v-75h20Z' transform='translate(-260 -520)' />
-        </svg>
-      )
-    }
-    return null
-  }
-}
diff --git a/lib/components/icons/gondola-icon.js b/lib/components/icons/gondola-icon.js
deleted file mode 100644
index d14bcb744..000000000
--- a/lib/components/icons/gondola-icon.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Component } from 'react'
-
-export default class GondolaIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <path d='M24.9,17.2c-1.7-0.6-5.9-0.9-8-1.1V6.7l12.4,4.5V9.5l-7.7-2.8l0-1.3l-11.2-4l0,1.3L2.7,0v1.6l11.9,4.2v10.2L10,16 c0,0-3.8,0.4-6,3c-2.2,2.6-2.3,4.1-2.3,5.7c0,1.5,1.3,4.1,3.2,5.2c1.9,1.1,4.3,1.3,4.3,1.3L19.5,32c0,0,4.9-0.1,7.1-1.4 c1.6-1,3.7-2.5,3.7-6.3C30.3,20.5,27.8,18.2,24.9,17.2z M10.5,26.3H4.1c0,0-0.8-2.8,0.3-4.5c1.1-1.7,2-2.4,2-2.4l4.1,0.1V26.3z M18.9,26.3h-6.2v-6.9h6.2V26.3z M28.2,26.3h-7.1v-6.9h4.8c0,0,1,0.6,2,2.3C29,23.5,28.2,26.3,28.2,26.3z' />
-      </svg>
-
-    )
-  }
-}
diff --git a/lib/components/icons/index.js b/lib/components/icons/index.js
deleted file mode 100644
index 8bdf35517..000000000
--- a/lib/components/icons/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-
-import BikeIcon from './bike-icon'
-import BiketownIcon from './biketown-icon'
-import BusIcon from './bus-icon'
-import Car2goIcon from './car2go-icon'
-import ReachNowIcon from './reachnow-icon'
-import GondolaIcon from './gondola-icon'
-import LyftIcon from './lyft-icon'
-import RailIcon from './rail-icon'
-import StreetcarIcon from './streetcar-icon'
-import TramIcon from './tram-icon'
-import TransitIcon from './transit-icon'
-import UberIcon from './uber-icon'
-import WalkIcon from './walk-icon'
-
-// define Portland-specific mode icons
-export default {
-  BICYCLE: <BikeIcon />,
-  BICYCLE_RENT: <BiketownIcon />,
-  BUS: <BusIcon />,
-  CAR_HAIL_LYFT: <LyftIcon />,
-  CAR_HAIL_UBER: <UberIcon />,
-  CAR_RENT_CAR2GO: <Car2goIcon />,
-  CAR_RENT_REACHNOW: <ReachNowIcon />,
-  GONDOLA: <GondolaIcon />,
-  RAIL: <RailIcon />,
-  STREETCAR: <StreetcarIcon />,
-  TRAM: <TramIcon />,
-  TRANSIT: <TransitIcon />,
-  WALK: <WalkIcon />,
-  customModeForLeg: (leg) => {
-    if (leg.routeLongName && leg.routeLongName.startsWith('Portland Streetcar')) return 'STREETCAR'
-    return null
-  }
-}
diff --git a/lib/components/icons/lyft-icon.js b/lib/components/icons/lyft-icon.js
deleted file mode 100644
index add6801bf..000000000
--- a/lib/components/icons/lyft-icon.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { Component } from 'react'
-
-export default class LyftIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' height='100%' width='100%'>
-        <path d='M0 81.1h77.8v208.7c0 33.1 15 52.8 27.2 61-12.7 11.1-51.2 20.9-80.2-2.8C7.8 334 0 310.7 0 289V81.1zm485.9 173.5v-22h23.8v-76.8h-26.1c-10.1-46.3-51.2-80.7-100.3-80.7-56.6 0-102.7 46-102.7 102.7V357c16 2.3 35.4-.3 51.7-14 17.1-14 24.8-37.2 24.8-59v-6.7h38.8v-76.8h-38.8v-23.3c0-34.6 52.2-34.6 52.2 0v77.1c0 56.6 46 102.7 102.7 102.7v-76.5c-14.5 0-26.1-11.7-26.1-25.9zm-294.3-99v113c0 15.4-23.8 15.4-23.8 0v-113H91v132.7c0 23.8 8 54 45 63.9 37 9.8 58.2-10.6 58.2-10.6-2.1 13.4-14.5 23.3-34.9 25.3-15.5 1.6-35.2-3.6-45-7.8v70.3c25.1 7.5 51.5 9.8 77.6 4.7 47.1-9.1 76.8-48.4 76.8-100.8V155.1h-77.1v.5z' />
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/mode-icon.js b/lib/components/icons/mode-icon.js
deleted file mode 100644
index dbbd75b54..000000000
--- a/lib/components/icons/mode-icon.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class ModeIcon extends Component {
-  static propTypes = {
-    mode: PropTypes.string
-  }
-
-  render () {
-    if (!this.props.mode) return null
-    switch (this.props.mode.toLowerCase()) {
-      case 'bus': return <BusIcon />
-      case 'tram':
-      case 'rail':
-      case 'subway':
-        return <TramIcon />
-      case 'walk': return <WalkIcon />
-      case 'bicycle':
-      case 'bicycle_rent':
-        return <BicycleIcon />
-      case 'ferry': return <FerryIcon />
-      case 'gondola': return <GondolaIcon />
-      case 'car': return <CarIcon />
-      case 'micromobility':
-      case 'micromobility_rent':
-        return <MicromobilityIcon />
-    }
-    return null
-  }
-}
-
-class BusIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 81.59 99.992' height='100%' width='100%'>
-        <path d='M68.848,68.51' />
-        <path d='M12.687,68.51' />
-        <g>
-          <path d='M77.619,14.775c-1.098-5.528-4.622-7.731-9.931-9.93C62.499,2.668,50.02,0.079,40.794,0 c-9.243,0.079-21.722,2.668-26.948,4.846c-5.271,2.199-8.795,4.402-9.875,9.93L0,45.284v42.091h6.84v6.564 c-0.027,8.071,11.745,8.071,11.75,0v-6.564h21.737h0.054H63v6.564c-0.014,8.071,11.759,8.071,11.75,0v-6.564h6.84V45.284 L77.619,14.775z M23.996,7.715h16.385h17.212c3.286-0.009,3.286,4.949,0,4.965H40.327H23.996 C20.694,12.664,20.694,7.706,23.996,7.715z M12.687,74.191c-3.101-0.015-5.631-2.542-5.627-5.682 c-0.004-3.099,2.526-5.627,5.627-5.627c3.136,0,5.665,2.528,5.683,5.627C18.352,71.649,15.823,74.177,12.687,74.191z M40.381,48.482H10.426c-2.925,0.028-3.54-2.081-3.253-4.192l3.088-22.177c0.425-2.67,1.336-4.443,4.854-4.468h25.213h26.149 c3.498,0.025,4.412,1.797,4.854,4.468l3.09,22.177c0.266,2.112-0.348,4.22-3.256,4.192H40.381z M68.848,74.191 c-3.1-0.015-5.628-2.542-5.628-5.682c0-3.099,2.528-5.627,5.628-5.627c3.137,0,5.667,2.528,5.681,5.627 C74.515,71.649,71.985,74.177,68.848,74.191z' />
-          <path d='M40.381-0.007c0.135,0,0.277,0.006,0.414,0.007c0.137-0.001,0.278-0.007,0.414-0.007H40.381z' />
-        </g>
-      </svg>
-    )
-  }
-}
-
-class TramIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 66.461 100' height='100%' width='100%'>
-        <path d='M28.549,7.023c-1.933-0.007-3.508-1.582-3.512-3.511C25.041,1.555,26.616-0.021,28.549,0  c1.952-0.021,3.526,1.555,3.511,3.512C32.075,5.441,30.5,7.016,28.549,7.023L28.549,7.023z' />
-        <path d='M37.913,7.023c1.936-0.007,3.512-1.582,3.512-3.511c0-1.957-1.576-3.532-3.512-3.512c-1.95-0.021-3.525,1.555-3.512,3.512  C34.388,5.441,35.963,7.016,37.913,7.023L37.913,7.023z' />
-        <path d='M51.856,78.064c4.872-0.809,9.73-5.898,9.719-12.109V20.611C61.587,14.218,56.2,8.34,48.903,8.347H33.281H17.606  C10.265,8.34,4.878,14.218,4.885,20.611v45.344c-0.007,6.211,4.852,11.301,9.719,12.109L0,100h8.446l10.432-15.37H33.23h14.351  L58.063,100h8.397L51.856,78.064z M24.986,13.031c0.002-1.136,0.969-2.072,2.085-2.088h6.158h6.159  c1.117,0.016,2.088,0.952,2.088,2.088v3.559c0,1.133-0.916,2.092-2.088,2.088H33.23h-6.158c-1.167,0.004-2.083-0.955-2.085-2.088  V13.031z M17.301,71.45c-3.059-0.023-5.553-2.517-5.546-5.598c-0.007-3.071,2.487-5.562,5.546-5.547  c3.09-0.016,5.584,2.476,5.598,5.547C22.886,68.934,20.391,71.427,17.301,71.45z M18.014,41.986  c-3.508-0.021-6.369-2.421-6.362-6.363v-8.141c0.025-3.396,2.219-6.356,6.362-6.363H33.23h15.215  c4.148,0.007,6.343,2.967,6.363,6.363v8.141c0.011,3.942-2.85,6.343-6.363,6.363H33.23H18.014z M43.46,65.853  c-0.009-3.071,2.482-5.562,5.545-5.547c3.09-0.016,5.584,2.476,5.6,5.547c-0.016,3.081-2.51,5.574-5.6,5.598  C45.942,71.427,43.451,68.934,43.46,65.853z' />
-      </svg>
-    )
-  }
-}
-
-class WalkIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' version='1.0' x='0px' y='0px' viewBox='0 0 55.74 100' height='100%' width='100%'>
-        <path d='M31.269,13.769c3.862,0,6.884-3.025,6.884-6.885C38.153,3.022,35.131,0,31.269,0c-3.86,0-6.885,3.022-6.885,6.884  C24.384,10.744,27.409,13.769,31.269,13.769z' />
-        <path d='M1.249,51.724l4.512-0.421L5.863,35.25l8.224-5.204c0,0-1.333,10.545-1.333,16.085c0,4.831-0.172,8.736-0.172,8.736  L2.054,96.918L9.489,100L21.28,61.549l8.195,10.424l9.339,26.337l8.394-3.355l-9.425-27.965L27.446,50.665l2.901-21.399l6.46,13.544  l16.622,5.708l2.311-4.199l-15.234-8.887c0,0-3.691-9.819-6.711-15.962c-1.027-2.091-5.196-2.774-6.894-2.901  c-4.896-0.362-7.428,1.296-11.488,3.432C11.358,22.131,0,30.728,0,30.728L1.249,51.724z' />
-      </svg>
-    )
-  }
-}
-
-class BicycleIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 100 61.3' height='100%' width='100%'>
-        <path d='M0,41.6C0,52.3,8.7,61,19.4,61c9.4,0,17.2-6.7,19-15.5c0.1,0,0.1,0,0.2,0c15.3-0.6,4.6,4.2,33-25.7c0.5,1.5,0.9,2.9,1.4,4.3  c-6.9,3-11.8,9.8-11.8,17.9c0,10.7,8.7,19.4,19.4,19.4c10.7,0,19.4-8.7,19.4-19.4s-8.7-19.4-19.4-19.4c-1.2,0-2.4,0.1-3.6,0.3  C69.5-1.5,71.9,0.1,57.9,0v3.9c10.2,0,8.9-0.6,11.2,7.3H35.3L34,7.5c7.6-1.7,9.7-1.7,8.2-3.7H25.1v3.8l4.5,0.1l1.3,3.6  c-2.1,4.6-3.8,8.5-5.3,11.9c-2-0.7-4-1-6.2-1C8.7,22.2,0,30.9,0,41.6z M74.4,28.4c4.8,15.4,4.4,15.1,6.3,15.3c1.1-0.1,1.9-0.9,1.9-2  c0-1.3,0.5,0.4-4.2-14.5c0.7-0.1,1.4-0.2,2.2-0.2c8.2,0,14.9,6.7,14.9,14.9s-6.7,14.9-14.9,14.9s-14.9-6.7-14.9-14.9  C65.7,35.9,69.3,30.7,74.4,28.4z M37,15.3l33,0.1L46.6,41L37,15.3z M29.4,24.9l3.6-8.1l9.4,24.6l-3.6,0C38.8,34.5,35,28.3,29.4,24.9  z M34.3,41.5l-12.3,0l5.6-12.4C31.6,31.8,34.2,36.3,34.3,41.5z M4.5,41.6c0-8.2,6.7-14.9,14.9-14.9c1.5,0,3,0.2,4.3,0.6  c-6.7,14.9-7,15.4-7,16.2c0.2,2.7,1.6,1.9,17.1,1.9c-1.7,6.3-7.5,11-14.3,11C11.2,56.4,4.5,49.8,4.5,41.6z' />
-      </svg>
-    )
-  }
-}
-
-class FerryIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 68.932' height='100%' width='100%'>
-        <path d='M98.634,68.932c-2.155,0-4.226-0.486-6.058-1.335c-1.904-0.882-4.036-1.402-6.263-1.402  c-2.226,0-4.37,0.521-6.25,1.402c-1.855,0.849-3.916,1.335-6.082,1.335c-2.143,0-4.213-0.486-6.081-1.335  c-1.892-0.882-4.023-1.402-6.239-1.402c-2.238,0-4.357,0.521-6.273,1.402c-1.831,0.849-3.914,1.335-6.059,1.335  c-2.155,0-4.238-0.486-6.07-1.335c-1.905-0.882-4.036-1.402-6.262-1.402c-2.227,0-4.371,0.521-6.25,1.402  c-1.843,0.849-3.916,1.335-6.071,1.335c-2.167,0-4.226-0.486-6.095-1.335c-1.879-0.882-4.022-1.402-6.237-1.402  c-2.229,0-4.359,0.521-6.263,1.402c-1.843,0.849-3.915,1.335-6.07,1.335v-9.2c2.156,0,4.228-0.496,6.07-1.333  c1.904-0.881,4.034-1.402,6.263-1.402c2.214,0,4.358,0.521,6.237,1.402c1.869,0.837,3.927,1.333,6.095,1.333  c2.155,0,4.228-0.496,6.071-1.333c1.879-0.881,4.023-1.402,6.25-1.402c2.226,0,4.357,0.521,6.262,1.402  c1.832,0.837,3.915,1.333,6.07,1.333c2.145,0,4.228-0.496,6.059-1.333c1.916-0.881,4.035-1.402,6.273-1.402  c2.214,0,4.348,0.521,6.239,1.402c1.868,0.837,3.938,1.333,6.081,1.333c2.166,0,4.227-0.496,6.082-1.333  c1.88-0.881,4.024-1.402,6.25-1.402c2.227,0,4.358,0.521,6.263,1.402c1.832,0.837,3.902,1.333,6.058,1.333V68.932z' />
-        <path d='M0.048,29.398L0.013,51.125c2.156,0,4.228-0.483,6.07-1.318c1.904-0.885,4.034-1.405,6.263-1.405  c2.214,0,4.358,0.521,6.237,1.405c1.869,0.835,3.927,1.318,6.095,1.318c2.155,0,4.228-0.483,6.071-1.318  c1.879-0.885,4.023-1.405,6.25-1.405c2.226,0,4.357,0.521,6.262,1.405c1.832,0.835,3.915,1.318,6.07,1.318  c2.145,0,4.228-0.483,6.059-1.318c1.916-0.885,4.035-1.405,6.273-1.405c2.214,0,4.348,0.521,6.239,1.405  c1.868,0.835,3.938,1.318,6.081,1.318c0.612,0,1.197-0.133,1.795-0.193c1.08-0.242,2.18-0.352,3.233-0.774l0.072-0.037  c7.83-3.207,14.596-11.171,18.811-17.103L100,29.398H0.048z' />
-        <path d='M78.22,4.948C75.814-0.45,69.336,0.01,69.336,0.01H0.013L0,25.803h86.913L78.22,4.948z M33.274,20.211  c0,0.993-0.814,1.817-1.808,1.817h-8.009c-0.994,0-1.796-0.824-1.796-1.817V7.864c0-0.991,0.802-1.802,1.796-1.802h8.009  c0.994,0,1.808,0.812,1.808,1.802V20.211z M49.929,20.211c0,0.993-0.802,1.817-1.785,1.817h-8.071c-0.993,0-1.795-0.824-1.795-1.817  V7.864c0-0.991,0.802-1.802,1.795-1.802h8.071c0.982,0,1.785,0.812,1.785,1.802V20.211z M16.679,20.211  c0,0.993-0.813,1.817-1.796,1.817H6.814c-0.994,0-1.795-0.824-1.795-1.817V7.864c0-0.991,0.801-1.802,1.795-1.802h8.069  c0.982,0,1.796,0.812,1.796,1.802V20.211z M55.842,6.062h14.452l0.12-0.011h0.097c0.153-0.012,3.961-0.159,5.244,2.711l5.518,13.267  H62.465L55.842,6.062z' />
-      </svg>
-
-    )
-  }
-}
-
-class GondolaIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 89.383' height='100%' width='100%'>
-        <polygon points='100,3.417 100,0 0,38.239 0,41.663 ' />
-        <path d='M43.871,16.965c2.986,0,5.425-2.467,5.425-5.507c0-3.034-2.439-5.476-5.425-5.476c-3.009,0-5.448,2.442-5.448,5.476  C38.424,14.498,40.864,16.965,43.871,16.965z' />
-        <path d='M77.553,45.469H53.319V25.603l-3.385,1.364v18.502H25.477c-1.915,0-3.477,1.576-3.477,3.516V85.86  c0,1.939,1.562,3.523,3.477,3.523h52.077c1.916,0,3.484-1.584,3.484-3.523V48.984C81.038,47.045,79.469,45.469,77.553,45.469z   M40.583,65.495c0,1.052-0.832,1.916-1.871,1.916H27.249c-1.038,0-1.891-0.864-1.891-1.916V53.94c0-1.051,0.854-1.915,1.891-1.915  h11.462c1.038,0,1.871,0.864,1.871,1.915V65.495z M59.211,65.351c0,1.057-0.848,1.892-1.893,1.892H45.887  c-1.047,0-1.893-0.835-1.893-1.892v-11.58c0-1.049,0.846-1.884,1.893-1.884h11.432c1.045,0,1.893,0.835,1.893,1.884V65.351z   M77.696,65.351c0,1.057-0.825,1.892-1.872,1.892H64.371c-1.038,0-1.893-0.835-1.893-1.892v-11.58c0-1.049,0.854-1.884,1.893-1.884  h11.453c1.047,0,1.872,0.835,1.872,1.884V65.351z' />
-        <path d='M56.848,12.063c3,0,5.439-2.467,5.439-5.507s-2.439-5.507-5.439-5.507c-2.985,0-5.424,2.467-5.424,5.507  S53.863,12.063,56.848,12.063z' />
-      </svg>
-    )
-  }
-}
-
-class CarIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' height='100%' width='100%'>
-        <path d='M499.991 168h-54.815l-7.854-20.944c-9.192-24.513-25.425-45.351-46.942-60.263S343.651 64 317.472 64H194.528c-26.18 0-51.391 7.882-72.908 22.793-21.518 14.912-37.75 35.75-46.942 60.263L66.824 168H12.009c-8.191 0-13.974 8.024-11.384 15.795l8 24A12 12 0 0 0 20.009 216h28.815l-.052.14C29.222 227.093 16 247.997 16 272v48c0 16.225 6.049 31.029 16 42.309V424c0 13.255 10.745 24 24 24h48c13.255 0 24-10.745 24-24v-40h256v40c0 13.255 10.745 24 24 24h48c13.255 0 24-10.745 24-24v-61.691c9.951-11.281 16-26.085 16-42.309v-48c0-24.003-13.222-44.907-32.772-55.86l-.052-.14h28.815a12 12 0 0 0 11.384-8.205l8-24c2.59-7.771-3.193-15.795-11.384-15.795zm-365.388 1.528C143.918 144.689 168 128 194.528 128h122.944c26.528 0 50.61 16.689 59.925 41.528L391.824 208H120.176l14.427-38.472zM88 328c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32s48 30.327 48 48-30.327 16-48 16zm336 0c-17.673 0-48 1.673-48-16 0-17.673 30.327-48 48-48s32 14.327 32 32c0 17.673-14.327 32-32 32z' />
-      </svg>
-    )
-  }
-}
-
-/**
- * Icons made by Freepik (https://www.freepik.com/)
- * from Flaticon (https://www.flaticon.com/)
- * licensed by Creative Commons BY 3.0 (http://creativecommons.org/licenses/by/3.0/)
- */
-class MicromobilityIcon extends Component {
-  render () {
-    return (
-      <svg height='100%' viewBox='0 0 512 512' width='100%' xmlns='http://www.w3.org/2000/svg'>
-        <path d='m464.027344 393.210938-47.425782-341.464844c-4.097656-29.5-29.648437-51.746094-59.429687-51.746094h-68.171875v40h68.171875c9.929687 0 18.441406 7.414062 19.808594 17.246094l36.148437 260.25c-52.128906 15.089844-91.835937 59.722656-99.703125 114.503906h-196.867187c-8.253906-23.277344-30.484375-40-56.558594-40-33.085938 0-60 26.914062-60 60s26.914062 60 60 60c26.074219 0 48.304688-16.722656 56.558594-40h235.441406v-20c0-43.472656 27.886719-80.550781 66.710938-94.296875l5.699218 41.042969c-19.234375 10.003906-32.410156 30.113281-32.410156 53.253906 0 33.085938 26.914062 60 60 60s60-26.914062 60-60c0-28.964844-20.632812-53.203125-47.972656-58.789062zm-404.027344 78.789062c-11.027344 0-20-8.972656-20-20s8.972656-20 20-20 20 8.972656 20 20-8.972656 20-20 20zm392 0c-11.027344 0-20-8.972656-20-20s8.972656-20 20-20 20 8.972656 20 20-8.972656 20-20 20zm0 0' />
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/rail-icon.js b/lib/components/icons/rail-icon.js
deleted file mode 100644
index 8f2ab99d6..000000000
--- a/lib/components/icons/rail-icon.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { Component } from 'react'
-
-export default class RailIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <path d='M6.9,30.6l2.8,0l0.3-0.5H22l0.3,0.5h2.9l-3.9-6.4c-0.1-0.2-0.2-0.5,0-0.6c0.2-0.1,3.3-2,3.5-2.1c0.2-0.2,0.4-0.3,0.4-0.7 c0,0,0-10.5,0-10.9c0-0.5-0.1-0.9-0.5-1.1c0,0-0.1-0.1-0.5-0.4c-0.4-0.3-0.5-0.9-0.5-1.2c0,0,0-2.1,0-2.9c0-0.8-0.6-1.5-1.1-1.7 l-4.2-0.9c-0.5-0.1-1.3-0.3-2.2-0.3c-0.9,0-1.7,0.2-2.2,0.3L9.6,2.6C9,2.8,8.5,3.5,8.5,4.3c0,0.8,0,2.9,0,2.9c0,0.3-0.2,0.9-0.5,1.2 C7.5,8.7,7.4,8.8,7.4,8.8C7.1,9,6.9,9.5,6.9,9.9c0,0.5,0,10.9,0,10.9c0,0.3,0.2,0.5,0.4,0.7c0.2,0.1,3.3,2,3.5,2.1 c0.2,0.1,0.1,0.4,0,0.6L6.9,30.6z M16,28.4h-4.9l0.8-1.3H16h4.1l0.8,1.3H16z M12.8,25.5l0.8-1.3H16h2.4l0.8,1.3H16H12.8z M22.3,19.3 c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1C21.8,18.1,22.3,18.6,22.3,19.3z M17.6,3.9 c0-0.3,0.2-0.4,0.6-0.4l3.4,0.7c0.2,0,0.4,0.3,0.4,0.5c0,0.2,0,2,0,2c0,0.1-0.3,0.4-0.6,0.3c-0.4-0.1-3.3-0.7-3.3-0.7 c-0.3-0.1-0.5-0.3-0.5-0.6V3.9z M16,8.9c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6 C14.3,9.7,15.1,8.9,16,8.9z M10,4.7c0-0.2,0.2-0.5,0.4-0.5l3.4-0.7c0.4,0,0.6,0.1,0.6,0.4v1.8c0,0.3-0.1,0.6-0.5,0.6 c0,0-2.9,0.7-3.3,0.7C10.3,7.1,10,6.8,10,6.7C10,6.7,10,4.9,10,4.7z M10.7,20.4c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1 c0.6,0,1.1,0.5,1.1,1.1C11.9,19.9,11.4,20.4,10.7,20.4z' />
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/reachnow-icon.js b/lib/components/icons/reachnow-icon.js
deleted file mode 100644
index bab628729..000000000
--- a/lib/components/icons/reachnow-icon.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-
-export default class ReachNowIcon extends Component {
-  render () {
-    return (
-      <svg viewBox='0 0 83.7 85.1' height='100%' width='100%'>
-        <path d='M42.9,331l-4.5-15a3,3,0,0,1,.6-2.6l18.9-21.2a2.43,2.43,0,0,1,2.4-.8l10.2,2,2.9-15.9H32.6a10.82,10.82,0,0,0-10.7,10.9v49.87Z' transform='translate(-21.9 -277.5)' />
-        <path d='M75,344.3l16.8-19-7.2-23.7-10-2-4.7,26.2a2.49,2.49,0,0,1-1.7,2l-18.7,6.5,1.6,5.2Z' transform='translate(-21.9 -277.5)' />
-        <path d='M94.9,277.5H78.6l-3.1,17,11.6,2.3a2.63,2.63,0,0,1,2,1.8l8.1,26.6a2.61,2.61,0,0,1-.6,2.6L77.8,349.1a2.43,2.43,0,0,1-2.4.8l-26.9-5.4a2.63,2.63,0,0,1-2-1.8l-2-6.6-22.6,7.77v7.83a10.82,10.82,0,0,0,10.7,10.9H94.9a10.82,10.82,0,0,0,10.7-10.9V288.4A10.82,10.82,0,0,0,94.9,277.5Z' transform='translate(-21.9 -277.5)' />
-        <path d='M60.7,296.9l-16.8,19L48,329.3s17.1-6,17-5.9l4.5-24.7Z' transform='translate(-21.9 -277.5)' />
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/streetcar-icon.js b/lib/components/icons/streetcar-icon.js
deleted file mode 100644
index e53550142..000000000
--- a/lib/components/icons/streetcar-icon.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Component } from 'react'
-
-export default class StreetcarIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <path d='M9.3,24.6c0.3,0.6,1,1,1.6,1.2l-3.5,5.4h2.5l3.5-5.3l5.2,0l3.5,5.3h2.5l-3.5-5.3c0.6-0.2,1.3-0.6,1.6-1.2l0.8-1.6 c0.3-0.7,0.6-1.9,0.6-2.7L23.2,6.5c-0.1-1-1-2-2.2-2h-2c0.3-0.9,0.9-2.4,1-2.5C20.9,2,21,2.1,21.1,2.1c0,0,0.1,0.2,0.1,0.2l0-0.1 c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.5-0.3,0.5-0.5c0-0.7-1.1-0.9-2.1-1.1c-0.7-0.1-2-0.2-3.9-0.2c-1.9,0-3.2,0.1-3.9,0.2 c-1,0.1-2.1,0.3-2.1,1.1c0,0.2,0.3,0.5,0.5,0.5c0.2,0,0.4-0.2,0.4-0.4l0,0.1c0,0,0.1-0.1,0.1-0.2c0,0,0.2-0.2,1.1-0.2 c0.1,0.2,0.7,1.7,1,2.5H11c-1.2,0-2.2,1-2.2,2L7.9,20.4c-0.1,0.8,0.2,2,0.6,2.7L9.3,24.6z M11.9,24.2c-0.8,0-1.4-0.6-1.4-1.4 c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4C13.3,23.5,12.7,24.2,11.9,24.2z M20,24.2c-0.8,0-1.4-0.6-1.4-1.4 c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4C21.4,23.5,20.8,24.2,20,24.2z M16,1.9c0.5,0,2.1,0,2.8,0c-0.1,0.3-0.7,1.7-1,2.6h-3.6 c-0.3-0.8-0.9-2.3-1-2.6C13.9,1.9,15.5,1.9,16,1.9z M11.3,7.4c0-0.6,0.5-1.1,1.1-1.1h7.1c0.6,0,1.1,0.5,1.1,1.1v0.4 c0,0.6-0.5,1.1-1.1,1.1h-7.1c-0.6,0-1.1-0.5-1.1-1.1V7.4z M10,10.9c0-0.6,0.6-1.1,1.2-1.1l9.6,0c0.6,0,1.1,0.5,1.2,1.1l0.5,8.2 c0,0.6-0.4,1.1-1,1.1H10.6c-0.6,0-1-0.5-1-1.1L10,10.9z' />
-      </svg>
-
-    )
-  }
-}
diff --git a/lib/components/icons/tram-icon.js b/lib/components/icons/tram-icon.js
deleted file mode 100644
index 10e69e931..000000000
--- a/lib/components/icons/tram-icon.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Component } from 'react'
-
-export default class TramIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <path d='M9.9,27.2v3.2L8.5,32h1.8l0.8-1.1v-1.8H21v1.8l1,1.1h1.6l-1.4-1.7v-3.1h3.4l0.3-1.6V5.2h-3.2l-0.7-1.9h-5.3V2.6l2.7-1.7V0 h-6.5v1l2.6,1.6v0.7h-5.3L9.4,5.2H6.2l0,20.4l0.3,1.6H9.9z M22.9,8.1l1.8,1.1V16l-1.8,0.6V8.1z M14.7,0.9h2.7L16,1.8L14.7,0.9z M9.9,8.3c0-0.5,0.3-0.8,0.8-0.8h10.4c0.5,0,0.8,0.3,0.8,0.8v7.8c0,0.5-0.3,0.8-0.8,0.8H10.7c-0.5,0-0.8-0.3-0.8-0.8V8.3z M21.9,18.1V20h-3.2v-1.9H21.9z M13.2,18.1v1.8H10v-1.8H13.2z M22.8,21.1v1.6H8.9v-1.6H22.8z M7.2,9.1L9,8v8.6L7.2,16V9.1z' />
-      </svg>
-
-    )
-  }
-}
diff --git a/lib/components/icons/transit-icon.js b/lib/components/icons/transit-icon.js
deleted file mode 100644
index d2e96487c..000000000
--- a/lib/components/icons/transit-icon.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { Component } from 'react'
-
-export default class TransitIcon extends Component {
-  render () {
-    // TODO: Find a better general transit icon to use than the bus icon.
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <g>
-          <g>
-            <g>
-              <path d='M19.9,14.4c-1.1,0-2,0.7-2.3,1.7c0.3,0,4.3,0,4.6,0C21.9,15.1,21,14.4,19.9,14.4z' />
-              <path d='M26.9,7c-0.2-0.7-0.5-1.4-1.2-1.8c-5.2-2.7-14.4-2.6-19.1,0C6.2,5.5,5.4,6.1,5.1,7c-0.4,1.5-0.6,3-0.6,3.7l0,5.7l0,2.2 v6.1c0,0.2,0.2,0.3,0.4,0.3h22.3c0.2,0,0.3-0.1,0.3-0.3v-5.2l0-8.9C27.5,9.7,27.3,8.1,26.9,7z M11,4.9h9.9V6H11V4.9z M7.9,21.4 c-1,0-1.8-0.8-1.8-1.8c0-0.5,0.2-0.9,0.5-1.3C7,18,7.5,17.8,7.9,17.8c1,0,1.8,0.8,1.8,1.8C9.7,20.6,8.9,21.4,7.9,21.4z M24,21.4 c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C25.8,20.6,25,21.4,24,21.4z M25.2,16.4H6.5C6.2,16.4,6,16,6,15.8 l0.5-7.9c0-0.4,0.3-0.8,0.8-0.8h17.4c0.2,0,0.7,0.5,0.7,1l0.6,7.7C26,16.1,25.6,16.4,25.2,16.4z' />
-            </g>
-            <g>
-              <path d='M6.5,27.6c0,0.8,0.8,1.2,1.6,1.2c0.4,0,0.8-0.1,1-0.3c0.3-0.2,0.4-0.5,0.4-0.9c0,0,0-1.7,0-1.9c-0.2,0-2.8,0-3,0 C6.5,25.9,6.5,27.6,6.5,27.6z' />
-              <path d='M22.3,27.6c0,0.8,0.8,1.1,1.6,1.1c0.8,0,1.6-0.4,1.6-1.1c0,0,0-1.7,0-1.8c-0.2,0-3.1,0-3.2,0 C22.3,25.9,22.3,27.6,22.3,27.6z' />
-            </g>
-          </g>
-        </g>
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/uber-icon.js b/lib/components/icons/uber-icon.js
deleted file mode 100644
index 77daea91a..000000000
--- a/lib/components/icons/uber-icon.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-
-export default class UberIcon extends Component {
-  render () {
-    return (
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 926.91 321.78' height='100%' width='100%'>
-        <path d='M53.33,229.81A79.25,79.25,0,0,0,69.6,256.47a70,70,0,0,0,24.63,16.95,80.36,80.36,0,0,0,31,5.88,76.61,76.61,0,0,0,30.51-6.1A75,75,0,0,0,180.55,256,77.86,77.86,0,0,0,197,229.58a95.52,95.52,0,0,0,5.88-34.35V0h47.45V316.35h-47V287a109,109,0,0,1-37.29,25.76,118.16,118.16,0,0,1-46.32,9A125.42,125.42,0,0,1,72.54,313a110.58,110.58,0,0,1-38-25.08A118.32,118.32,0,0,1,9.27,248.79Q0,226,0,197.95V0H47.45V195.24A97.36,97.36,0,0,0,53.33,229.81Z' />
-        <path d='M332.17,0V115.24a120.88,120.88,0,0,1,36.61-25.08A109.74,109.74,0,0,1,414,80.9a119.18,119.18,0,0,1,47.45,9.49,119.55,119.55,0,0,1,64.18,64.18,118.06,118.06,0,0,1,9.49,47,116.44,116.44,0,0,1-9.49,46.77,120.14,120.14,0,0,1-64.17,63.95A119.18,119.18,0,0,1,414,321.78a111.31,111.31,0,0,1-45.42-9.27,120.06,120.06,0,0,1-36.83-25.08v28.92H286.52V0h45.64Zm5.2,232.75a78.63,78.63,0,0,0,16.95,25.31,81.78,81.78,0,0,0,25.31,17.17,76.94,76.94,0,0,0,31.18,6.33,75.83,75.83,0,0,0,30.73-6.33,79.06,79.06,0,0,0,25.08-17.17,83.82,83.82,0,0,0,16.95-25.31,76.93,76.93,0,0,0,6.33-31.18,78.54,78.54,0,0,0-6.33-31.41,83.07,83.07,0,0,0-16.95-25.53,76.09,76.09,0,0,0-25.08-16.95,79.45,79.45,0,0,0-86.77,16.95,81.07,81.07,0,0,0-17.17,25.53,78.54,78.54,0,0,0-6.33,31.41A79.38,79.38,0,0,0,337.36,232.75Z' />
-        <path d='M560.84,155a123,123,0,0,1,24.86-38.19A119.57,119.57,0,0,1,716.31,90.39a109.34,109.34,0,0,1,36.61,25.08,114.65,114.65,0,0,1,24,38,129.58,129.58,0,0,1,8.59,47.68V216H597.9a77.29,77.29,0,0,0,9,26,78.34,78.34,0,0,0,16.95,20.79,77.45,77.45,0,0,0,23,13.78,75.27,75.27,0,0,0,27.34,5q41.13,0,66.43-33.9l33,24.4a122.74,122.74,0,0,1-42.48,36.15q-25.31,13.11-56.94,13.11a127.27,127.27,0,0,1-48.13-9A117.2,117.2,0,0,1,587.28,287a120.06,120.06,0,0,1-26-38.19A123.31,123.31,0,0,1,560.84,155Zm63.5-17.85q-19.21,16-25.53,42.71H739.36q-5.88-26.66-25.08-42.71t-45-16Q643.55,121.12,624.34,137.16Z' />
-        <path d='M870.87,142.36q-14.46,15.82-14.46,42.93V316.35H810.76V85.87H856v28.47a64.24,64.24,0,0,1,22.37-22.15q13.78-8.14,32.77-8.14h15.82v42.48h-19Q885.33,126.54,870.87,142.36Z' />
-      </svg>
-    )
-  }
-}
diff --git a/lib/components/icons/walk-icon.js b/lib/components/icons/walk-icon.js
deleted file mode 100644
index a071dcfa4..000000000
--- a/lib/components/icons/walk-icon.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-
-export default class WalkIcon extends Component {
-  render () {
-    return (
-      <svg version='1.1' viewBox='0 0 32 32' height='100%' width='100%'>
-        <g>
-          <path d='M17.1,0c1.5,0,2.7,1.2,2.7,2.7c0,1.5-1.2,2.7-2.7,2.7s-2.7-1.2-2.7-2.7C14.5,1.2,15.7,0,17.1,0z M25.2,16.6 c-0.4,0.5-1.1,0.7-1.7,0.3h0c0,0-3.7-2.5-3.9-2.7c-0.3-0.2-0.4-0.6-0.5-0.8c-0.1-0.2-0.5-1-0.8-1.5L18,13.3l-0.9,3.9 c0,0,4.6,5.4,4.7,5.5c0.1,0.1,0.2,0.5,0.3,0.7c0.1,0.2,1.2,6.6,1.2,6.6c0.2,1-0.5,1.9-1.4,2.1c-1,0.2-1.9-0.5-2.1-1.4l-1.2-6.3 l-3.8-4.1c0,0-0.8,3.9-0.9,4c0,0.1-0.1,0.2-0.1,0.3c0,0.1-3.9,6.7-3.9,6.7c-0.5,0.9-1.6,1.1-2.5,0.6c-0.9-0.5-1.1-1.6-0.6-2.5 l3.4-5.8L13,11l-1.9,1.5l-1,4.5c0,0,0,0,0,0c0,0.6-0.7,1.1-1.4,0.9c-0.6-0.1-1-0.4-0.9-1.4h0c0,0,1.1-5,1.1-5.2 c0.1-0.2,0.2-0.5,0.3-0.6c0.8-0.6,3.8-3.1,4.6-3.8c1-0.8,1.5-1.1,2.3-1.1c0.7,0,1.4,0.2,2.1,1C18.7,7.1,19,7.7,19.1,8 c0.2,0.3,2.2,4.4,2.2,4.4l3.6,2.5c0,0,0,0,0,0C25.5,15.3,25.6,16,25.2,16.6z' />
-        </g>
-      </svg>
-
-    )
-  }
-}
diff --git a/lib/components/mobile/main.js b/lib/components/mobile/main.js
index 0dcd5d08a..abec5db02 100644
--- a/lib/components/mobile/main.js
+++ b/lib/components/mobile/main.js
@@ -18,8 +18,9 @@ import { getActiveItinerary } from '../../util/state'
 class MobileMain extends Component {
   static propTypes = {
     currentQuery: PropTypes.object,
-    icons: PropTypes.object,
     itineraryClass: PropTypes.func,
+    LegIcon: PropTypes.elementType.isRequired,
+    ModeIcon: PropTypes.elementType.isRequired,
     map: PropTypes.element,
     setMobileScreen: PropTypes.func,
     title: PropTypes.element,
@@ -45,7 +46,7 @@ class MobileMain extends Component {
   }
 
   render () {
-    const { icons, itineraryClass, itineraryFooter, map, title, uiState } = this.props
+    const { itineraryClass, itineraryFooter, LegIcon, map, ModeIcon, title, uiState } = this.props
 
     // check for route viewer
     if (uiState.mainPanelContent === MainPanelContent.ROUTE_VIEWER) {
@@ -73,7 +74,6 @@ class MobileMain extends Component {
       case MobileScreens.SEARCH_FORM:
         return (
           <MobileSearchScreen
-            icons={icons}
             map={map}
             newScreen={this.newScreen}
           />
@@ -99,11 +99,17 @@ class MobileMain extends Component {
         return <MobileDateTimeScreen />
 
       case MobileScreens.SET_OPTIONS:
-        return <MobileOptionsScreen icons={icons} />
+        return <MobileOptionsScreen ModeIcon={ModeIcon} />
 
       case MobileScreens.RESULTS_SUMMARY:
-        return <MobileResultsScreen map={map} itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} icons={icons} />
-
+        return (
+          <MobileResultsScreen
+            itineraryClass={itineraryClass}
+            itineraryFooter={itineraryFooter}
+            LegIcon={LegIcon}
+            map={map}
+          />
+        )
       default:
         return <p>Invalid mobile screen</p>
     }
diff --git a/lib/components/mobile/options-screen.js b/lib/components/mobile/options-screen.js
index 8e20f4331..3b3b3fbf1 100644
--- a/lib/components/mobile/options-screen.js
+++ b/lib/components/mobile/options-screen.js
@@ -11,7 +11,7 @@ import { MobileScreens, setMobileScreen } from '../../actions/ui'
 
 class MobileOptionsScreen extends Component {
   static propTypes = {
-    icons: PropTypes.object
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   _planTripClicked = () => {
@@ -19,7 +19,7 @@ class MobileOptionsScreen extends Component {
   }
 
   render () {
-    const { icons } = this.props
+    const { ModeIcon } = this.props
 
     return (
       <MobileContainer>
@@ -30,7 +30,7 @@ class MobileOptionsScreen extends Component {
         />
 
         <div className='options-main-content mobile-padding'>
-          <ConnectedSettingsSelectorPanel icons={icons} />
+          <ConnectedSettingsSelectorPanel ModeIcon={ModeIcon} />
         </div>
 
         <div className='options-lower-tray mobile-padding'>
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index e62aa0a7c..209bacca4 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -95,7 +95,17 @@ class MobileResultsScreen extends Component {
   _toggleRealtime = () => this.props.setUseRealtimeResponse({useRealtime: !this.props.useRealtime})
 
   render () {
-    const { error, icons, itineraryClass, itineraryFooter, query, realtimeEffects, resultCount, useRealtime, activeItineraryIndex } = this.props
+    const {
+      activeItineraryIndex,
+      error,
+      itineraryClass,
+      itineraryFooter,
+      LegIcon,
+      query,
+      realtimeEffects,
+      resultCount,
+      useRealtime
+    } = this.props
     const { expanded } = this.state
 
     const narrativeContainerStyle = expanded
@@ -205,7 +215,7 @@ class MobileResultsScreen extends Component {
             expanded={this.state.expanded}
             onClick={this._optionClicked}
             showRealtimeAnnotation={showRealtimeAnnotation}
-            customIcons={icons}
+            LegIcon={LegIcon}
           />
         </div>
 
diff --git a/lib/components/mobile/search-screen.js b/lib/components/mobile/search-screen.js
index bfa2952cf..b21a56693 100644
--- a/lib/components/mobile/search-screen.js
+++ b/lib/components/mobile/search-screen.js
@@ -17,9 +17,7 @@ import { MobileScreens, setMobileScreen } from '../../actions/ui'
 
 class MobileSearchScreen extends Component {
   static propTypes = {
-    icons: PropTypes.object,
     map: PropTypes.element,
-
     setMobileScreen: PropTypes.func
   }
 
@@ -44,8 +42,6 @@ class MobileSearchScreen extends Component {
   }
 
   render () {
-    const { icons } = this.props
-
     return (
       <MobileContainer>
         <MobileNavigationBar headerText='Plan Your Trip' />
@@ -75,7 +71,6 @@ class MobileSearchScreen extends Component {
             <Col xs={6}>
               <SettingsPreview
                 onClick={this._expandOptionsClicked}
-                icons={icons}
                 compressed
               />
             </Col>
diff --git a/lib/components/narrative/connected-trip-details.js b/lib/components/narrative/connected-trip-details.js
index f34205233..f094f559d 100644
--- a/lib/components/narrative/connected-trip-details.js
+++ b/lib/components/narrative/connected-trip-details.js
@@ -4,10 +4,9 @@ import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 const TripDetails = styled(TripDetailsBase)`
-  border: 2px solid gray;
-  border-radius: 0;
-  padding: 6px 10px;
-  margin: 16px 0 10px;
+  b {
+    font-weight: 600;
+  }
 `
 
 // Connect imported TripDetails class to redux store.
diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index efc740c3a..fcbeca04a 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -18,6 +18,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
       expanded,
       index,
       itinerary,
+      LegIcon,
       setActiveLeg,
       setActiveStep
     } = this.props
@@ -30,7 +31,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
           <span className='title'>Itinerary {index + 1}</span>{' '}
           <span className='duration pull-right'>{formatDuration(itinerary.duration)}</span>{' '}
           <span className='arrivalTime'>{formatTime(itinerary.startTime)}—{formatTime(itinerary.endTime)}</span>
-          <ItinerarySummary itinerary={itinerary} />
+          <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
         </button>
         {(active || expanded) &&
           <div className='body'>
@@ -40,6 +41,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
               activeStep={activeStep}
               setActiveLeg={setActiveLeg}
               setActiveStep={setActiveStep}
+              LegIcon={LegIcon}
             />
             <TripDetails itinerary={itinerary} />
             <TripTools itinerary={itinerary} />
diff --git a/lib/components/narrative/default/itinerary-details.js b/lib/components/narrative/default/itinerary-details.js
index 91537b8b6..337943dcc 100644
--- a/lib/components/narrative/default/itinerary-details.js
+++ b/lib/components/narrative/default/itinerary-details.js
@@ -7,11 +7,12 @@ import TransitLeg from './transit-leg'
 
 export default class ItineraryDetails extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   render () {
-    const { itinerary, activeLeg, activeStep, setActiveLeg, setActiveStep } = this.props
+    const { itinerary, activeLeg, activeStep, LegIcon, setActiveLeg, setActiveStep } = this.props
     return (
       <div className='detail'>
         {itinerary.legs.map((leg, index) => {
@@ -22,6 +23,7 @@ export default class ItineraryDetails extends Component {
               index={index}
               key={index}
               leg={leg}
+              LegIcon={LegIcon}
               setActiveLeg={setActiveLeg} />
             : <AccessLeg
               active={legIsActive}
diff --git a/lib/components/narrative/default/itinerary-summary.js b/lib/components/narrative/default/itinerary-summary.js
index d93ff3cfb..a2e61a836 100644
--- a/lib/components/narrative/default/itinerary-summary.js
+++ b/lib/components/narrative/default/itinerary-summary.js
@@ -1,15 +1,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import ModeIcon from '../../icons/mode-icon'
-
 export default class ItinerarySummary extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   render () {
-    const { itinerary } = this.props
+    const { itinerary, LegIcon } = this.props
 
     const blocks = []
     itinerary.legs.forEach((leg, i) => {
@@ -26,7 +25,7 @@ export default class ItinerarySummary extends Component {
       // Add the mode icon
       blocks.push(
         <div key={blocks.length} className='summary-block mode-block'>
-          <ModeIcon mode={leg.mode} />
+          <LegIcon leg={leg} />
         </div>
       )
 
diff --git a/lib/components/narrative/default/transit-leg.js b/lib/components/narrative/default/transit-leg.js
index 543072a97..44b826ecd 100644
--- a/lib/components/narrative/default/transit-leg.js
+++ b/lib/components/narrative/default/transit-leg.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import Icon from '../icon'
-import ModeIcon from '../../icons/mode-icon'
 import ViewTripButton from '../../viewers/view-trip-button'
 import ViewStopButton from '../../viewers/view-stop-button'
 
@@ -12,7 +11,8 @@ const { formatDuration, formatTime } = coreUtils.time
 
 export default class TransitLeg extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   constructor (props) {
@@ -35,7 +35,7 @@ export default class TransitLeg extends Component {
   }
 
   render () {
-    const { active, index, leg } = this.props
+    const { active, index, leg, LegIcon } = this.props
     const { expanded } = this.state
     const numStops = leg.to.stopIndex - leg.from.stopIndex - 1
 
@@ -47,7 +47,7 @@ export default class TransitLeg extends Component {
           onClick={(e) => this._onLegClick(e, leg, index)}
         >
           <div className='mode-icon-container'>
-            <ModeIcon mode={leg.mode} />
+            <LegIcon leg={leg} />
           </div>
           <div className='route-name'>
             <div>
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index e4c92a4b6..5d36ac58f 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -1,9 +1,9 @@
 import isEqual from 'lodash.isequal'
-import { TriMetLegIcon } from '@opentripplanner/icons'
 import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 import ItineraryBody from '@opentripplanner/itinerary-body/lib/otp-react-redux/itinerary-body'
 import LineColumnContent from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
 import PlaceName from '@opentripplanner/itinerary-body/lib/otp-react-redux/place-name'
+import { PlaceName as PlaceNameWrapper } from '@opentripplanner/itinerary-body/lib/styled'
 import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
@@ -22,6 +22,12 @@ const ItineraryBodyContainer = styled.div`
   padding: 20px 0px;
 `
 
+const StyledItineraryBody = styled(ItineraryBody)`
+  ${PlaceNameWrapper} {
+    font-weight: inherit;
+  }
+`
+
 class ConnectedItineraryBody extends Component {
   /** avoid rerendering if the itinerary to display hasn't changed */
   shouldComponentUpdate (nextProps, nextState) {
@@ -33,6 +39,7 @@ class ConnectedItineraryBody extends Component {
       config,
       diagramVisible,
       itinerary,
+      LegIcon,
       setActiveLeg,
       setViewedTrip,
       showLegDiagram
@@ -40,11 +47,11 @@ class ConnectedItineraryBody extends Component {
 
     return (
       <ItineraryBodyContainer>
-        <ItineraryBody
+        <StyledItineraryBody
           config={config}
           diagramVisible={diagramVisible}
           itinerary={itinerary}
-          LegIcon={TriMetLegIcon}
+          LegIcon={LegIcon}
           LineColumnContent={LineColumnContent}
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
diff --git a/lib/components/narrative/line-itin/itin-summary.js b/lib/components/narrative/line-itin/itin-summary.js
index 955491975..b402e2cba 100644
--- a/lib/components/narrative/line-itin/itin-summary.js
+++ b/lib/components/narrative/line-itin/itin-summary.js
@@ -3,10 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import styled from 'styled-components'
 
-import {
-  getLegIcon
-} from '../../../util/itinerary'
-
 // TODO: make this a prop
 const defaultRouteColor = '#008'
 
@@ -34,7 +30,7 @@ const Header = styled.div`
   margin-top: -3px;
 `
 
-const ModeIcon = styled.div`
+const LegIconContainer = styled.div`
   height: 30px;
   width: 30px;
 `
@@ -75,7 +71,8 @@ const ShortName = styled.div`
 
 export default class ItinerarySummary extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   _onSummaryClicked = () => {
@@ -83,7 +80,7 @@ export default class ItinerarySummary extends Component {
   }
 
   render () {
-    const { customIcons, itinerary, timeOptions } = this.props
+    const { itinerary, LegIcon, timeOptions } = this.props
     const {
       centsToString,
       maxTNCFare,
@@ -131,7 +128,7 @@ export default class ItinerarySummary extends Component {
           }).map((leg, k) => {
             return (
               <RoutePreview key={k}>
-                <ModeIcon>{getLegIcon(leg, customIcons)}</ModeIcon>
+                <LegIconContainer><LegIcon leg={leg} /></LegIconContainer>
                 {coreUtils.itinerary.isTransit(leg.mode)
                   ? (
                     <ShortName leg={leg} >
diff --git a/lib/components/narrative/line-itin/line-itinerary.js b/lib/components/narrative/line-itin/line-itinerary.js
index baf6034bd..d0550d1f0 100644
--- a/lib/components/narrative/line-itin/line-itinerary.js
+++ b/lib/components/narrative/line-itin/line-itinerary.js
@@ -46,10 +46,10 @@ export default class LineItinerary extends NarrativeItinerary {
     const {
       active,
       companies,
-      customIcons,
       expanded,
       itinerary,
       itineraryFooter,
+      LegIcon,
       showRealtimeAnnotation,
       onClick,
       timeFormat
@@ -65,16 +65,17 @@ export default class LineItinerary extends NarrativeItinerary {
     }
 
     return (
-      <LineItineraryContainer>
+      <LineItineraryContainer className='line-itin'>
         <ItinerarySummary
           companies={companies}
           itinerary={itinerary}
+          LegIcon={LegIcon}
           timeOptions={timeOptions}
           onClick={onClick}
-          customIcons={customIcons} />
+        />
         {showRealtimeAnnotation && <SimpleRealtimeAnnotation />}
         {active || expanded
-          ? <ItineraryBody itinerary={itinerary} />
+          ? <ItineraryBody itinerary={itinerary} LegIcon={LegIcon} />
           : null}
         {itineraryFooter}
       </LineItineraryContainer>
diff --git a/lib/components/narrative/narrative-routing-results.js b/lib/components/narrative/narrative-routing-results.js
index 204cc245b..f16634d26 100644
--- a/lib/components/narrative/narrative-routing-results.js
+++ b/lib/components/narrative/narrative-routing-results.js
@@ -11,8 +11,8 @@ import { setMainPanelContent } from '../../actions/ui'
 
 class NarrativeRoutingResults extends Component {
   static propTypes = {
-    customIcons: PropTypes.object,
     itineraryClass: PropTypes.func,
+    LegIcon: PropTypes.elementType.isRequired,
     routingType: PropTypes.string
   }
 
@@ -25,14 +25,19 @@ class NarrativeRoutingResults extends Component {
   }
 
   render () {
-    const { customIcons, error, itineraryClass, itineraryFooter, pending, itineraries, mainPanelContent } = this.props
+    const { error, itineraryClass, itineraryFooter, LegIcon, pending, itineraries, mainPanelContent } = this.props
     if (pending) return <Loading />
     if (error) return <ErrorMessage />
     if (mainPanelContent) return null
 
     return (
       // TODO: If multiple routing types exist, do the check here.
-      <TabbedItineraries itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} itineraries={itineraries} customIcons={customIcons} />
+      <TabbedItineraries
+        itineraryClass={itineraryClass}
+        itineraryFooter={itineraryFooter}
+        itineraries={itineraries}
+        LegIcon={LegIcon}
+      />
     )
   }
 }
diff --git a/lib/util/itinerary.js b/lib/util/itinerary.js
index 6a65f5f13..70468dbe5 100644
--- a/lib/util/itinerary.js
+++ b/lib/util/itinerary.js
@@ -1,33 +1,5 @@
 import { latLngBounds } from 'leaflet'
 import coreUtils from '@opentripplanner/core-utils'
-import React from 'react'
-
-import ModeIcon from '../components/icons/mode-icon'
-
-/**
- * Returns a react element of the desired icon. If customIcons are defined, then
- * the icon will be attempted to be used from that lookup of icons. Otherwise,
- * a ModeIcon element will be returned.
- *
- * @param  {string} iconId  A string with the desired icon ID. This icon can
- * include modes or companies or anything that is defined in the customIcons.
- * @param  {[Map<string, React.Element>]} customIcons A customized lookup of
- * icons. These are defined as part of the implementing webapp. If this lookup
- * is not defined, then the ModeIcon class will be used instead.
- * @return {React.Element}
- */
-export function getIcon (iconId, customIcons) {
-  // Check if there is a custom icon
-  if (customIcons && iconId in customIcons) {
-    return customIcons[iconId]
-  }
-
-  // Custom icon not available for the given iconId. Use the ModeIcon component
-  // to show the icon based on the iconId, but always use the default car icon
-  // for any car-based modes that didn't have custom icon
-  if (iconId && iconId.startsWith('CAR')) iconId = 'CAR'
-  return <ModeIcon mode={iconId} />
-}
 
 export function getLeafletItineraryBounds (itinerary) {
   return latLngBounds(coreUtils.itinerary.getItineraryBounds(itinerary))
@@ -39,38 +11,3 @@ export function getLeafletItineraryBounds (itinerary) {
 export function getLeafletLegBounds (leg) {
   return latLngBounds(coreUtils.itinerary.getLegBounds(leg))
 }
-
-/**
- * Return an icon depending on the leg info
- *
- * @param  {Object} leg  The leg data of an itinerary in an OTP trip plan result
- * @param  {[Object]} customIcons If defined for this webapp, the custom icons
- * consist of a lookup table of icons to return for a specific icon ID. These
- * icons typically show either companies or transport modes, but they could show
- * other icons too. See this file in trimet-mod-otp for an example setup:
- * https://github.com/ibi-group/trimet-mod-otp/blob/6a32e2142655c4f4d09a3f349b971b7505e2866a/lib/icons/index.js#L24-L55
- */
-export function getLegIcon (leg, customIcons) {
-  // check if a custom function exists for determining the icon for a leg
-  if (customIcons && typeof customIcons.customIconForLeg === 'function') {
-    // function exits, get the icon string lookup. It's possible for there to be
-    // a custom function that only returns a string for when a leg meets the
-    // criteria of the custom function
-    const customIconStr = customIcons.customIconForLeg(leg)
-    // the customIconStr could be undefined for this leg, but if it is not, then
-    // immediately return this custom icon for the leg
-    if (customIconStr) return getIcon(customIconStr, customIcons)
-  }
-  let iconStr = leg.mode
-  if (iconStr === 'CAR' && leg.rentedCar) {
-    iconStr = leg.from.networks[0]
-  } else if (iconStr === 'CAR' && leg.tncData) {
-    iconStr = leg.tncData.company
-  } else if (iconStr === 'BICYCLE' && leg.rentedBike && leg.from.networks) {
-    iconStr = leg.from.networks[0]
-  } else if (iconStr === 'MICROMOBILITY' && leg.rentedVehicle && leg.from.networks) {
-    iconStr = leg.from.networks[0]
-  }
-
-  return getIcon(iconStr, customIcons)
-}
diff --git a/package.json b/package.json
index f2ac610dc..8a74f2799 100644
--- a/package.json
+++ b/package.json
@@ -29,26 +29,26 @@
   "dependencies": {
     "@conveyal/lonlat": "^1.1.0",
     "@mapbox/polyline": "^0.2.0",
-    "@opentripplanner/base-map": "^0.0.20",
-    "@opentripplanner/core-utils": "^0.0.20",
-    "@opentripplanner/endpoints-overlay": "^0.0.20",
-    "@opentripplanner/from-to-location-picker": "^0.0.20",
-    "@opentripplanner/geocoder": "^0.0.20",
-    "@opentripplanner/humanize-distance": "^0.0.20",
-    "@opentripplanner/icons": "^0.0.20",
-    "@opentripplanner/itinerary-body": "^0.0.20",
-    "@opentripplanner/location-field": "^0.0.20",
-    "@opentripplanner/location-icon": "^0.0.20",
-    "@opentripplanner/park-and-ride-overlay": "^0.0.20",
-    "@opentripplanner/printable-itinerary": "^0.0.20",
-    "@opentripplanner/route-viewer-overlay": "^0.0.20",
-    "@opentripplanner/stop-viewer-overlay": "^0.0.20",
-    "@opentripplanner/stops-overlay": "^0.0.20",
-    "@opentripplanner/transitive-overlay": "^0.0.20",
-    "@opentripplanner/trip-details": "^0.0.20",
-    "@opentripplanner/trip-form": "^0.0.20",
-    "@opentripplanner/trip-viewer-overlay": "^0.0.20",
-    "@opentripplanner/vehicle-rental-overlay": "^0.0.20",
+    "@opentripplanner/base-map": "^0.0.21",
+    "@opentripplanner/core-utils": "^0.0.21",
+    "@opentripplanner/endpoints-overlay": "^0.0.21",
+    "@opentripplanner/from-to-location-picker": "^0.0.21",
+    "@opentripplanner/geocoder": "^0.0.21",
+    "@opentripplanner/humanize-distance": "^0.0.21",
+    "@opentripplanner/icons": "^0.0.21",
+    "@opentripplanner/itinerary-body": "^0.0.21",
+    "@opentripplanner/location-field": "^0.0.21",
+    "@opentripplanner/location-icon": "^0.0.21",
+    "@opentripplanner/park-and-ride-overlay": "^0.0.21",
+    "@opentripplanner/printable-itinerary": "^0.0.21",
+    "@opentripplanner/route-viewer-overlay": "^0.0.21",
+    "@opentripplanner/stop-viewer-overlay": "^0.0.21",
+    "@opentripplanner/stops-overlay": "^0.0.21",
+    "@opentripplanner/transitive-overlay": "^0.0.21",
+    "@opentripplanner/trip-details": "^0.0.21",
+    "@opentripplanner/trip-form": "^0.0.21",
+    "@opentripplanner/trip-viewer-overlay": "^0.0.21",
+    "@opentripplanner/vehicle-rental-overlay": "^0.0.21",
     "@turf/along": "^6.0.1",
     "bootstrap": "^3.3.7",
     "bowser": "^1.9.3",
diff --git a/yarn.lock b/yarn.lock
index e2ad479a9..97a5b88ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1331,18 +1331,18 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
-"@opentripplanner/base-map@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-0.0.20.tgz#35f1b81179080e5b2573a67b9ce9408dde390bd2"
-  integrity sha512-FR9C93sou4d+3b7wytDsMRZQ/Zeu7ZJGAoQ8WiHlPnCIS/grRTWeihQysK1zga9JAerpBocvIvLc2pF3DyJAIw==
+"@opentripplanner/base-map@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-0.0.21.tgz#5464e0442023c82a158add051389636e15208f27"
+  integrity sha512-/SHActy1z2GWfsXj6CPyJk33noU30KCALOnRxq69xYazVJw5k6Ih57ku7ZfSdxygmEEQXS/LTGsPvnqdLzkObQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/core-utils@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-0.0.20.tgz#057914abe4f395cc9bb5468a97b620ad6e46efe4"
-  integrity sha512-nwUk/FCJ2X68SM8zN53SFGD2x3ooMirJ2JRcA22U2v8hsEU6NywaSiDDvG1/kjC+WWHbHSNLP5VACSnFc7UAWA==
+"@opentripplanner/core-utils@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-0.0.21.tgz#89cc5d54a0898132bad463b43e4195028ffa0686"
+  integrity sha512-wsoRfOMUsLui+8i8savx/5+/m64gyoQF1izJMFtvytnXMVr6gQavjl36pW2xejUg9xkyIjrfEvkO7paCXqQ23w==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@turf/along" "^6.0.1"
@@ -1353,172 +1353,172 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
-"@opentripplanner/endpoints-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-0.0.20.tgz#386835b7ab0fb18d68eb5035ab4984f55717363d"
-  integrity sha512-1miuJBESWRBXR5TH2EUrUyn/zKeTngcoitWfWUbX322rRv3D6soNd7BdOSqQ1waxKHobqWKC1Tq/Az2RbfZhIg==
+"@opentripplanner/endpoints-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-0.0.21.tgz#6b709aac4948ee153ef24438af60c75218a56ee7"
+  integrity sha512-dZtI8RbngE/wzgjvXy8cHolAt1yw0OvoVSjF5pxjoGuFu3j0Oyo23G2/Ls+FbHgr8StBaUovVoMcm7viq50RUA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"
 
-"@opentripplanner/from-to-location-picker@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/from-to-location-picker/-/from-to-location-picker-0.0.20.tgz#e945a286ae39077b3fbd3ddf1f31cbb38ea4a067"
-  integrity sha512-b+bLWcDu9y5jYUz078isXGnyhTlO0gSXBTtYoEOsm0Y7RNDIfvrytKDxSKAyPnaRnaftkbsUcXTmUfUTXCw2PQ==
+"@opentripplanner/from-to-location-picker@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/from-to-location-picker/-/from-to-location-picker-0.0.21.tgz#0166fc9afbff15e4fb2fa06b85249b2e22994596"
+  integrity sha512-aaTpm5ZZNetuRdWZCYEqR5ry8ToKAOHA1+PLequAEA8MzMqsz3mlmqroIEQGPW5Ij2ajvUxRqCGIi9j7boaViQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/geocoder@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-0.0.20.tgz#479eed134f4bb68cde9442c049b2630e5eaa499c"
-  integrity sha512-EkTLmdrBzw0ABFiOrJCEM6ajK5D2T+KFD3FcTowTi7e1esGWpXzEDb7VvbobMaMhwDCztenv1s0APd9J9o0B0g==
+"@opentripplanner/geocoder@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-0.0.21.tgz#3d7532587c0a92a1852daf2b9320930dbe23fe87"
+  integrity sha512-+ukQNTTYR65b2d3me2LutjaVfiBYdU7Y3QhbE9fDqT429b4b9cCvrIKQjlq2y7TnAKnSoqgf9r9JR0hMi3Q+TA==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.2"
     "@conveyal/lonlat" "^1.4.0"
     isomorphic-mapzen-search "^1.4.1"
     lodash.memoize "^4.1.2"
 
-"@opentripplanner/humanize-distance@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-0.0.20.tgz#06eab437c92b8eea5d9596957d7fbcc8c2bd4500"
-  integrity sha512-m+3gpoSDGY13f8WRIx8fSkVi6Qhv23fG3zbY6oymFQ+j5bMPow4f6XJO2nIY+pI0EbipPEKWbpeRwmXZWlWspg==
+"@opentripplanner/humanize-distance@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-0.0.21.tgz#2f7fd209fcaec3d09a8943152c0f36d34982dec4"
+  integrity sha512-7EO1RcTJ3QXCZkSxaWiV7pglxV/Fb6liUblqEZqvPmHPJq3zZ7u5p5pHD/w1McQyFmCLhCulIPmpke1uZ/+25g==
 
-"@opentripplanner/icons@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-0.0.20.tgz#951c75ed093fb9d74e4b4fc7d2af45ced446b856"
-  integrity sha512-vV81bsB7b3XN8lED3A55Qrjx84lUJyiVY99f13W1oqRlaP1xFIk4MSspg6hHoyanLiZBGp+vdcwWYnKJk4LLtw==
+"@opentripplanner/icons@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-0.0.21.tgz#fc72c834c6002db81f62a5c5ada22882636b8bc6"
+  integrity sha512-o41BKUQSbs+H8AJ1FfrlBthxquVtnl8X2GHGVuPyfZCj21nxifD0l7aUrmzzxdCCSgJPvHLuxdq+Nw8QXF6u/g==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-0.0.20.tgz#0f24a4ac0ccd4de21451c5255ec673450bc8198c"
-  integrity sha512-u3MQUg3SAYs5hMHf2sIPZDF8VLHmeWpXaDW33Pi7WJyn5fJ5AYXsdisEwc87+inOoG0zB6d5usTUkB8Ldlx/rA==
+"@opentripplanner/itinerary-body@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-0.0.21.tgz#8a2eeb3146b92803609d84395f137fb187646c78"
+  integrity sha512-4RcoZpYTDgCA5Kcm2LXQbnC8qkU9jqcEULD+g50fBmuLIqeMarJt7LqsqlvmwPaukv0SuYUBoCnRmFJ4N1n4VA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
-    "@opentripplanner/icons" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
+    "@opentripplanner/icons" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     currency-formatter "^1.5.5"
     moment "^2.24.0"
     prop-types "^15.7.2"
     react-resize-detector "^4.2.1"
     velocity-react "^1.4.3"
 
-"@opentripplanner/location-field@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-0.0.20.tgz#f2b019bde39dfdb570789afc078e1bb1808941d0"
-  integrity sha512-+SC9IHpJ49KzvAw03IIH8HlvRcGx9kNGdIdJ6PtGSNCsOd/91/LkfKTdLeI/Z24axWQpdSPM6BhGCyilIoVqfg==
+"@opentripplanner/location-field@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-0.0.21.tgz#8fbe7c020fa151cbf4b05e658a03b9bb5f3f413d"
+  integrity sha512-DFhGkblCRJhFi3PRCpSAPBhpgh1Vs18JSrXZ4/PrpIOF81LupksmWx3vdlT7+2LZQk56diCKC/qNZKnp8qhgQA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/geocoder" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/geocoder" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"
     throttle-debounce "^2.1.0"
 
-"@opentripplanner/location-icon@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-icon/-/location-icon-0.0.20.tgz#8f88522cec37e0c37b051421ba315e2065d464d7"
-  integrity sha512-TTtoV7s4moNQ++h1TRQhFFTRueRfoNgVnV8fnLhE77T0rf6UXHDhbZNlt1nm/wyHcYF1MbTynQmZmID85V9UMg==
+"@opentripplanner/location-icon@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-icon/-/location-icon-0.0.21.tgz#296e0a8f1c06abbff03d04167468f04469060638"
+  integrity sha512-sliDW9jn0wL3oKViJ0GigdS9qfgm89qj5yGR8gd454bp7L1DH/xaZzjc8TxpbAGb4+Z9trhFwWyqkRd3yz5BMg==
   dependencies:
     styled-icons "^9.1.0"
 
-"@opentripplanner/park-and-ride-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/park-and-ride-overlay/-/park-and-ride-overlay-0.0.20.tgz#0342a798f9a147143f8821062d477751d6145999"
-  integrity sha512-SiJMZnhD8mG8771pbryfYa+a8T+UnBoFMocu6SB4S911CnRwoFDnaMNosIH6hVrzZquisBWnrsTdJHRMnCkI3w==
+"@opentripplanner/park-and-ride-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/park-and-ride-overlay/-/park-and-ride-overlay-0.0.21.tgz#af8e2d9be92610936ca59919c67a9ca1b1405fa7"
+  integrity sha512-r8bigQi7ZEmAT5e5KbY0JLyISUs055jlOEEKpjlpnP27EkDnE56pQSbRcCUVz4PGH0uFwEV5b5IJNzxP09UBuQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/from-to-location-picker" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/from-to-location-picker" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/printable-itinerary@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-0.0.20.tgz#d48b9f78ba41827d820bc496c0300a7cd2839c64"
-  integrity sha512-KuZA0Z6S3Nn35uPoZGChlEOjRSmgBmIcG+bdSBscHo5TbdoX3D1WLfGtIYeph7adLnFljSMHIyATvS1d6Hn7Mw==
+"@opentripplanner/printable-itinerary@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-0.0.21.tgz#b0fc8bb37d0a209f7524cd7ef14d18539e2c1a71"
+  integrity sha512-dnPtxjtnP1IT0Ntho+r7Q33o+wEJi6PdagFkVsTaZdVBBzSt1maNTBzDWa7hD9GALV8WrtDZg+HRH5yBP8FDsw==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-0.0.20.tgz#61e9fdbfc248d84b77733a31fbb7c5d5a0c27f1e"
-  integrity sha512-Vrejj8DFUfLWt/AN8ogepEH+wRlEyfLQosBA5ynEg/xaExSSDaiRA7Ite2CHvpuJfbDKZfTtWLrP6k4Gf0bL/A==
+"@opentripplanner/route-viewer-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-0.0.21.tgz#219689a28e34d715922a8c866bc8c71404be6f79"
+  integrity sha512-rxRj+dV44b52j9GbGSYbncz6ORtfZOXolJggteCkE5oDxcsr4Wmv6fYlTjyfqhPQlXFS/Rc6w61ztHKXcysE/Q==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/stop-viewer-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/stop-viewer-overlay/-/stop-viewer-overlay-0.0.20.tgz#8448757238081feace0c0d4852fd39247cd795e2"
-  integrity sha512-UmBs0xLW4/rTOCrasg53vqIZZM/EVNrCDJJmbhGN/y8ZWZpzpWowlpzo2S/qZiSrLhc00+KdluBwRVcnA+Lx4A==
+"@opentripplanner/stop-viewer-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/stop-viewer-overlay/-/stop-viewer-overlay-0.0.21.tgz#4ae6a258ed831eb3944a9730f5af14fd0125c779"
+  integrity sha512-qcRfY6WVDi2hQVz8grXex7hzm86VPpoD1vzV19UCNSW4g0STK+0iRnrIj7wrzZdOIpMS7t92gvE1d7WxhXFTcQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/stops-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-0.0.20.tgz#1fcbce27a0d9438616cb861169d4a6ec3d5ea0e9"
-  integrity sha512-3m7p7eSWYu8mil7qy/DqqK7eOK26ccQEuvbIhur/btyYaKpKYLodIXoO3mH3UarJfTpQzRMdeQ+W3YTobMYgZg==
+"@opentripplanner/stops-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-0.0.21.tgz#ee79b26b1bb6751ec25a33544f85ba416ed21042"
+  integrity sha512-TPWiRZ7mV+MYu50l0WOkvZfRxjMjaXYL9mruNWG09cx0HuiGObD4o3xtxEmggMoMVjgktyb02G7KOE1OQrKTgA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/from-to-location-picker" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/from-to-location-picker" "^0.0.21"
 
-"@opentripplanner/transitive-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-0.0.20.tgz#93f30afcd248e1705feac08e0a385683dcdc84fd"
-  integrity sha512-lOuWjwb6LlhjMRKjSVeNmBjrsdNewwNe3pnLJjpAnWhSTeunLATiv8aYQk8TYGJz2AclSgYYzySgBWHXnF6Pzw==
+"@opentripplanner/transitive-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-0.0.21.tgz#ac889766cf6dbb8a4f1ec61316d393088f1f4866"
+  integrity sha512-+v9qSWE71kL8iv9BL+RJ6GamVUVnotOBIxo4zmN9YuwJSpqsMZCjvUd03Ix5Q2TKGaAKIgCObezDPlu2IJHMfg==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     lodash.isequal "^4.5.0"
     transitive-js "^0.13.0"
 
-"@opentripplanner/trip-details@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-0.0.20.tgz#ef80eee732e24d6c17d771f6f7d9f9d83deb27cd"
-  integrity sha512-nZDXHyBgghQZAdu2mLg51Lc5M6OraK6Vp5aYesXVa1ARBwug2hr0W2R/N6F4nQmU5SI0RQAN/b5irGplsKnnXw==
+"@opentripplanner/trip-details@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-0.0.21.tgz#1eaf85dbaa1688c338e41330f4f30def7a7d1c36"
+  integrity sha512-vMy+1i/wOl0ZPQDqfWUyl5kjxI9Mv2+NJKl3xylwmUBFQynaGl61vmG4GKRBBNWucPWqQGVKXo8z72qRoLZNZg==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
     moment "^2.24.0"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"
     velocity-react "^1.4.3"
 
-"@opentripplanner/trip-form@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-0.0.20.tgz#823e23ef8e332f5aa3fe85306ee65a0bee17f914"
-  integrity sha512-GZOZj4mCyPWx64OO1klZpsJ0JEggxmG5Qx264fwue9l8pun4D9DuCJFbclw51Tu/vLJ0VUuFZJBlECRCKeussg==
+"@opentripplanner/trip-form@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-0.0.21.tgz#5f9deb9ac2bf34d3ce26c19f14392cf3850a999a"
+  integrity sha512-3MqOAx8L+14vO3Tr+j6YbhctYGHXnxbYyGZONI6OpijlmRINmxCKG7oK/VX+8PjWftqZggEUGW09FUiEUhh/hg==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/icons" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/icons" "^0.0.21"
     moment "^2.17.1"
 
-"@opentripplanner/trip-viewer-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-viewer-overlay/-/trip-viewer-overlay-0.0.20.tgz#f65ed3527edea2e2304b5e02394b62ac69de7c0e"
-  integrity sha512-neLU+iO1dTYSXefW00IltdO0vdxtkEJpMG9GiFOUCgVAvLhyHuJca1aofgKZmcsArLhRo7eV2T8YzEHf3EiOCQ==
+"@opentripplanner/trip-viewer-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-viewer-overlay/-/trip-viewer-overlay-0.0.21.tgz#9b4515db20ea106c7160ac38773f5cb7f3d651b3"
+  integrity sha512-YI/tks6QAjA9dGOp6hd7yC/SxIXQ5DvI9T4UewEFIxembXD920wlcF4GF8DFlmB/GPF67m6Qz7rfvrq+qjjKcw==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/vehicle-rental-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/vehicle-rental-overlay/-/vehicle-rental-overlay-0.0.20.tgz#ef30b97f8c1080497056246a59f371f96efabc11"
-  integrity sha512-7ujSgc2mG/hZpZEL3DW+v3fIWSBUY3BOxoyqPlE0KhoE805KQi99LMxUYre+ovcEyIhcr0OKGSig0Br0X6banw==
+"@opentripplanner/vehicle-rental-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/vehicle-rental-overlay/-/vehicle-rental-overlay-0.0.21.tgz#5dc3396329d46d05c1da6db0dca3e4311b9bfcbb"
+  integrity sha512-8OY42IwWM+4sA2rmyJRZhE/CnOfmH6HHsqFoYrnhBp/U4U7BKsXpyuZwVr9yYhKZoY8zibj75MYso5R49UUarQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/from-to-location-picker" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/from-to-location-picker" "^0.0.21"
     lodash.memoize "^4.1.2"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"