freenowtech · Mukesh-FN · Aug 18, 2025 · Aug 14, 2025
@@ -2,13 +2,17 @@ import * as React from 'react';
 import { DefaultLogo } from './variants/DefaultLogo';
 import { BusinessLogo } from './variants/BusinessLogo';
 import { applyPrefix, getSemanticValue } from '../../utils/cssVariables';
+import { DefaultVerticalLogo } from './variants/DefaultVerticalLogo';
+import { TrustInTaxiLogo } from './variants/TrustInTaxiLogo';
+import { ByLyftLogo } from './variants/ByLyftLogo';
+import { DriversLogo } from './variants/DriversLogo';
 
-interface LogoProps {
+interface LogoProps extends React.SVGProps<React.ElementRef<'svg'>> {
     /**
      * Change the logo appearance to reflect the respective part of the organization
      * @default default
      */
-    variant?: 'default' | 'business';
+    variant?: 'default' | 'business' | 'drivers' | 'default-vertical' | 'trust-in-taxi' | 'rider' | 'by-lyft';
     /**
      * Change the logo to monochrome version (blue letters for regular version and white letters for inverted)
      * @default false
@@ -18,13 +22,27 @@ interface LogoProps {
 
 const monochromeCss = {
     [applyPrefix('logo-free', 's')]: getSemanticValue('logo-subtitle'),
-    [applyPrefix('logo-now', 's')]: getSemanticValue('logo-subtitle')
+    [applyPrefix('logo-now', 's')]: getSemanticValue('logo-subtitle'),
+    [applyPrefix('logo-lyft', 's')]: getSemanticValue('logo-subtitle')
 };
 
-const Logo: React.FC<LogoProps> = ({ monochrome, variant }: LogoProps) => {
-    const Component = variant === 'business' ? BusinessLogo : DefaultLogo;
+const Logo: React.FC<LogoProps> = ({ monochrome, variant, style = {}, ...otherProps }: LogoProps) => {
+    const componentStyle = { ...style, ...(monochrome ? monochromeCss : undefined) };
 
-    return <Component style={monochrome ? monochromeCss : undefined} />;
+    switch (variant) {
+        case 'business':
+            return <BusinessLogo style={componentStyle} {...otherProps} />;
+        case 'drivers':
+            return <DriversLogo style={componentStyle} {...otherProps} />;
+        case 'default-vertical':
+            return <DefaultVerticalLogo style={componentStyle} {...otherProps} />;
+        case 'trust-in-taxi':
+            return <TrustInTaxiLogo style={componentStyle} {...otherProps} />;
+        case 'by-lyft':
+            return <ByLyftLogo style={componentStyle} {...otherProps} />;
+        default:
+            return <DefaultLogo style={componentStyle} {...otherProps} />;
+    }
 };
 
 export { Logo, LogoProps };
@@ -25,6 +25,30 @@ export const Business: Story = {
     }
 };
 
+export const Drivers: Story = {
+    args: {
+        variant: 'drivers'
+    }
+};
+
+export const DefaultVertical: Story = {
+    args: {
+        variant: 'default-vertical'
+    }
+};
+
+export const TrustInTaxi: Story = {
+    args: {
+        variant: 'trust-in-taxi'
+    }
+};
+
+export const ByLyft: Story = {
+    args: {
+        variant: 'by-lyft'
+    }
+};
+
 export const BusinessMonochrome: Story = {
     args: {
         variant: 'business',
@@ -37,3 +61,31 @@ export const Monochrome: Story = {
         monochrome: true
     }
 };
+
+export const DefaultVerticalMonochrome: Story = {
+    args: {
+        variant: 'default-vertical',
+        monochrome: true
+    }
+};
+
+export const TrustInTaxiMonochrome: Story = {
+    args: {
+        variant: 'trust-in-taxi',
+        monochrome: true
+    }
+};
+
+export const DriversMonochrome: Story = {
+    args: {
+        variant: 'drivers',
+        monochrome: true
+    }
+};
+
+export const ByLyftMonochrome: Story = {
+    args: {
+        variant: 'by-lyft',
+        monochrome: true
+    }
+};
@@ -6,7 +6,7 @@ export const LogoPropsTable: FC = () => {
     const props = [
         {
             name: 'variant',
-            type: '"default" | "business"',
+            type: "'default' | 'business' | 'drivers' | 'default-vertical' | 'trust-in-taxi' | 'rider'",
             description: 'Specify the department of the company',
             defaultValue: '"default"'
         },

@@ -2,30 +2,30 @@ import React, { ElementRef, FC, memo, SVGProps } from 'react';
 import { getSemanticValue } from '../../../utils/cssVariables';
 
 const BusinessLogo: FC<SVGProps<ElementRef<'svg'>>> = memo(props => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="124" height="34" fill="none" {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="124" height="34" fill="none" {...props} viewBox="0 0 502 127">
         <path
-            fill={getSemanticValue('logo-free')}
-            fillRule="evenodd"
-            d="M0 21.98V9.4h8.94v2.19H2.38v2.89h6v2.18h-6v5.32H0Zm21.21-8.77c0 1.74-1.08 3.1-2.85 3.61l3.47 5.16h-2.75l-3.29-4.95h-1.9v4.95h-2.38V9.4h5.28c2.6.01 4.42 1.57 4.42 3.8Zm14.67 8.77V9.4h9.1v2.19h-6.72v2.87h6.13v2.13h-6.13v3.2h6.72v2.19h-9.1Zm-21.99-7.13v-3.28h2.85c1.26 0 2.04.64 2.04 1.66 0 1.01-.77 1.62-2.04 1.62h-2.85ZM24.01 9.4v12.58h9.1V19.8h-6.72v-3.2h6.13v-2.14h-6.13V11.6h6.72V9.4H24Z"
-            clipRule="evenodd"
+            d="M279.37 78.9301C284.805 78.9301 290.118 77.3185 294.637 74.2989C299.156 71.2794 302.679 66.9876 304.758 61.9663C306.838 56.945 307.383 51.4197 306.322 46.0891C305.262 40.7585 302.645 35.862 298.802 32.0189C294.958 28.1757 290.062 25.5585 284.731 24.4982C279.401 23.4378 273.875 23.982 268.854 26.0619C263.833 28.1418 259.541 31.664 256.521 36.1831C253.502 40.7021 251.89 46.0151 251.89 51.4502C251.825 55.0768 252.492 58.6793 253.849 62.0428C255.207 65.4062 257.229 68.4615 259.794 71.0264C262.359 73.5912 265.414 75.6129 268.778 76.9709C272.141 78.3289 275.744 78.9952 279.37 78.9301ZM279.37 64.8701C272.07 64.8701 267.21 59.3802 267.21 51.4502C267.21 43.5202 272.07 38.0001 279.37 38.0001C286.67 38.0001 291.53 43.4902 291.53 51.4202C291.53 59.3502 286.67 64.8701 279.37 64.8701ZM82.1302 51.4502C82.1302 67.7302 93.8602 78.9301 111.13 78.9301C119.13 78.9301 125.4 76.9301 130.36 73.6501V60.0001C125.222 63.8979 118.949 66.0054 112.5 66.0001C104.57 66.0001 98.7602 62.5101 97.2802 56.0001H133.54C133.845 53.7936 133.985 51.5675 133.96 49.3401C133.96 34.2201 123.18 23.9701 108.7 23.9701C94.2202 23.9701 82.1302 35.1702 82.1302 51.4502ZM97.5602 45.5301C98.8202 40.0401 103.16 36.8601 108.65 36.8601C114.14 36.8601 118.17 39.9301 119.01 45.5301H97.5602ZM43.6503 77.8701V25.0001H58.9802V32.0001C60.4123 29.6297 62.4507 27.6842 64.8852 26.3641C67.3198 25.044 70.0624 24.3971 72.8302 24.4901C75.096 24.4396 77.3522 24.7987 79.4902 25.5501V39.9301C76.7291 38.8486 73.7855 38.3087 70.8202 38.3401C65.0102 38.3401 58.9802 41.6201 58.9802 50.3401V77.9301H43.6503V77.8701ZM-0.00976562 77.8701V32.0001C-0.00976562 16.4601 10.7703 8.85015 23.4603 8.85015C28.1976 8.74029 32.8974 9.71514 37.2002 11.7002V26.2902C33.9762 24.1362 30.1973 22.9622 26.3202 22.9101C20.5002 22.9101 15.3202 25.7601 15.3202 32.0001V33.0001H37.2002V46.7401H15.3202V77.9202L-0.00976562 77.8701ZM306.64 25.0001H322.18L331.7 59.8801L339.84 32.3902C341.63 26.1602 344.91 24.3902 348.72 24.3902C352.53 24.3902 355.8 26.1902 357.6 32.3902L365.74 59.8801L375.26 25.0001H390.8L377.05 69.2902C374.94 76.1602 371.66 78.9001 366.48 78.9001C361.3 78.9001 357.71 76.2602 355.6 69.2902L348.73 46.1402L341.86 69.2902C339.74 76.2902 336.05 78.9001 330.97 78.9001C325.89 78.9001 322.51 76.1602 320.4 69.2902L306.66 25.0001H306.64ZM197.03 77.8701V47.8701C197.03 30.4301 208.44 23.9901 221.45 23.9901C234.46 23.9901 245.87 30.4301 245.87 47.8701V77.8701H230.54V48.0702C230.54 40.9902 226.73 38.0702 221.45 38.0702C216.17 38.0702 212.36 41.0702 212.36 48.0702V77.8701H197.03ZM139.1 51.4502C139.1 67.7302 150.83 78.9301 168.1 78.9301C176.1 78.9301 182.37 76.9301 187.34 73.6501V60.0001C182.199 63.898 175.922 66.0054 169.47 66.0001C161.54 66.0001 155.73 62.5101 154.25 56.0001H190.51C190.815 53.7936 190.955 51.5675 190.93 49.3401C190.93 34.2201 180.15 23.9701 165.67 23.9701C151.19 23.9701 139.1 35.1702 139.1 51.4502ZM154.53 45.5301C155.046 43.0008 156.448 40.7383 158.482 39.1492C160.517 37.5601 163.051 36.7485 165.63 36.8601C171.12 36.8601 175.15 39.9301 175.99 45.5301H154.53Z"
+            fill={getSemanticValue('logo-now')}
+        />
+        <path
+            d="M352.25 126.181C347.25 126.181 344.25 123.581 343.93 119.181H348.25C348.45 121.181 349.97 122.381 352.25 122.381C354.25 122.381 355.61 121.461 355.61 119.981C355.61 115.701 344.49 119.661 344.49 111.501C344.49 107.861 347.49 105.381 351.73 105.381C356.61 105.381 359.57 107.861 359.81 111.821H355.49C355.354 110.975 354.903 110.212 354.228 109.685C353.553 109.158 352.703 108.907 351.85 108.981C350.13 108.981 348.77 109.781 348.77 111.301C348.77 115.581 360.01 111.301 360.01 119.621C360.01 123.741 357.01 126.181 352.25 126.181ZM333.61 126.181C328.61 126.181 325.61 123.581 325.29 119.181H329.61C329.81 121.181 331.33 122.381 333.61 122.381C335.61 122.381 336.97 121.461 336.97 119.981C336.97 115.701 325.85 119.661 325.85 111.501C325.85 107.861 328.85 105.381 333.09 105.381C337.97 105.381 340.93 107.861 341.17 111.821H336.85C336.71 110.979 336.257 110.22 335.582 109.698C334.907 109.175 334.06 108.926 333.21 109.001C331.49 109.001 330.13 109.801 330.13 111.321C330.13 115.601 341.37 111.321 341.37 119.641C341.37 123.741 338.37 126.181 333.61 126.181ZM307.95 113.461H317.83C317.809 112.849 317.664 112.249 317.405 111.695C317.146 111.142 316.777 110.646 316.321 110.239C315.865 109.831 315.331 109.52 314.752 109.325C314.173 109.129 313.56 109.053 312.95 109.101C310.23 109.101 308.51 110.621 307.95 113.461ZM313.31 126.181C306.71 126.181 303.07 120.981 303.07 115.701C303.07 110.421 306.35 105.381 312.95 105.381C319.55 105.381 322.71 110.301 322.71 115.101C322.71 115.781 322.71 116.421 322.63 116.821H307.83C308.23 120.021 310.23 122.101 313.31 122.101C315.83 122.101 317.51 121.101 317.99 119.101H322.79C322.07 123.421 318.31 126.181 313.31 126.181ZM280.83 125.861V105.701H285.75V108.821C286.83 106.621 289.15 105.381 292.03 105.381C296.55 105.381 299.51 108.661 299.51 113.381V125.861H294.63V114.421C294.63 111.661 292.91 109.741 290.39 109.741C287.67 109.741 285.75 111.901 285.75 114.861V125.861H280.83ZM270.83 97.0605H276.11V102.541H270.83V97.0605ZM270.99 125.861V105.701H275.91V125.861H270.99ZM259.36 126.181C254.36 126.181 251.36 123.581 251.04 119.181H255.31C255.51 121.181 257.03 122.381 259.31 122.381C261.31 122.381 262.67 121.461 262.67 119.981C262.67 115.701 251.55 119.661 251.55 111.501C251.55 107.861 254.55 105.381 258.79 105.381C263.67 105.381 266.63 107.861 266.87 111.821H262.55C262.414 110.975 261.963 110.212 261.288 109.685C260.613 109.158 259.763 108.907 258.91 108.981C257.19 108.981 255.83 109.781 255.83 111.301C255.83 115.581 267.07 111.301 267.07 119.621C267.08 123.741 264.08 126.181 259.31 126.181H259.36ZM236.2 126.181C231.64 126.181 228.68 122.901 228.68 118.181V105.701H233.6V117.141C233.6 119.901 235.28 121.821 237.8 121.821C240.56 121.821 242.48 119.661 242.48 116.701V105.701H247.31V125.861H242.43V122.741C241.819 123.85 240.905 124.763 239.795 125.372C238.685 125.981 237.424 126.262 236.16 126.181H236.2ZM214.82 121.941C218.06 121.941 220.22 119.501 220.22 115.781C220.22 112.061 218.06 109.621 214.82 109.621C211.58 109.621 209.38 112.061 209.38 115.781C209.38 119.501 211.5 121.941 214.78 121.941H214.82ZM215.82 126.181C214.648 126.223 213.483 125.988 212.42 125.494C211.356 125.001 210.424 124.263 209.7 123.341V125.861H204.78V97.0605H209.7V108.141C210.423 107.253 211.34 106.543 212.38 106.065C213.42 105.586 214.556 105.352 215.7 105.381C221.54 105.381 225.06 109.661 225.06 115.781C225.06 121.901 221.54 126.181 215.78 126.181H215.82ZM180.64 125.861V105.701H185.56V109.261C185.87 108.159 186.556 107.2 187.498 106.55C188.44 105.9 189.58 105.599 190.72 105.701H193.08V109.821H189.92C186.76 109.821 185.56 112.501 185.56 116.341V125.861H180.64ZM166.31 121.941C169.63 121.941 171.87 119.421 171.87 115.781C171.87 112.141 169.63 109.621 166.31 109.621C162.99 109.621 160.71 112.141 160.71 115.781C160.71 119.421 162.96 121.941 166.31 121.941ZM166.31 126.181C164.258 126.157 162.26 125.527 160.565 124.37C158.871 123.213 157.556 121.58 156.788 119.678C156.019 117.776 155.83 115.688 156.245 113.679C156.659 111.67 157.659 109.828 159.118 108.385C160.578 106.943 162.431 105.964 164.445 105.572C166.459 105.181 168.544 105.394 170.437 106.184C172.331 106.975 173.948 108.308 175.085 110.015C176.223 111.723 176.83 113.729 176.83 115.781C176.868 117.167 176.621 118.546 176.104 119.833C175.587 121.12 174.812 122.287 173.826 123.262C172.839 124.237 171.663 124.999 170.371 125.501C169.078 126.003 167.696 126.234 166.31 126.181ZM144 125.861V109.861H140V105.701H144V103.821C144 99.7406 146.84 97.0605 151.2 97.0605H154.8V101.221H151.8C151.42 101.192 151.038 101.246 150.68 101.379C150.323 101.511 149.998 101.72 149.729 101.989C149.459 102.259 149.251 102.584 149.118 102.941C148.986 103.298 148.932 103.68 148.96 104.061V105.701H154.84V109.821H148.96V125.821L144 125.861Z"
+            fill={getSemanticValue('logo-subtitle')}
         />
         <path
+            d="M502 36.2927V51.7073C502 65.6837 502 72.6722 498.854 77.8061C497.094 80.6781 494.679 83.0929 491.807 84.853C486.672 88 479.684 88 465.707 88H450.293C446.235 88 442.767 88 439.761 87.9231C432.414 87.7349 427.837 87.0865 424.194 84.8538C421.322 83.0938 418.907 80.679 417.147 77.807C414 72.6722 414 65.6837 414 51.7073V36.2927C414 30.5748 414 26.0262 414.215 22.2956C414.526 16.9082 415.286 13.2292 417.145 10.1939C418.905 7.32189 421.32 4.90714 424.192 3.14703C429.328 0 436.316 0 450.293 0H465.707C479.684 0 486.672 0 491.806 3.14574C494.678 4.90596 497.093 7.32069 498.853 10.1926C500.955 13.6224 501.652 17.8802 501.884 24.4965C502 27.7849 502 31.6538 502 36.2927Z"
+            fill={getSemanticValue('background-page-default')}
+        />
+        <path
+            d="M491.806 3.14574C486.672 0 479.684 0 465.707 0H450.293C436.316 0 429.328 0 424.194 3.14574C421.322 4.90585 418.907 7.3206 417.147 10.1926C415.289 13.2275 414.527 16.9082 414.215 22.2956H419.222C435.519 22.2956 444.346 29.9346 447.062 46.2292L451.136 71.1829L496.758 7.33691C495.33 5.69584 493.66 4.28248 491.806 3.14574Z"
             fill={getSemanticValue('logo-now')}
-            fillRule="evenodd"
-            d="M79.36 21.93 74.69 9.4h2.57l.05.15 2.83 7.94 3.17-8.09h1.36l.02.05 3.14 8.04L90.7 9.4h2.56L88.6 21.98h-1.37L84 13.6l-3.23 8.38h-1.38l-.02-.05ZM48 21.98V9.4h1.42l7.06 8.01v-8h2.38v12.57h-1.39l-7.09-8.03v8.03H48Zm19.64-10.56a4.1 4.1 0 0 1 4.13 4.25c0 2.49-1.74 4.29-4.13 4.29-2.4 0-4.13-1.8-4.13-4.29 0-2.46 1.74-4.25 4.13-4.25Zm-.02 10.76c3.7 0 6.59-2.85 6.59-6.49s-2.9-6.49-6.59-6.49a6.46 6.46 0 0 0-6.57 6.5 6.46 6.46 0 0 0 6.57 6.48Z"
-            clipRule="evenodd"
         />
         <path
+            d="M419.222 36.3848H414V51.707C414 65.6834 414 72.6719 417.146 77.8058C418.906 80.6778 421.321 83.0926 424.193 84.8527C427.836 87.087 432.414 87.7316 439.761 87.9219L433.143 48.7774C431.614 40.1192 428.051 36.3848 419.222 36.3848Z"
             fill={getSemanticValue('logo-now')}
-            fillRule="evenodd"
-            d="M119.62.2 104.77 15.1V6.75L96.03.2h-4.5l.02.02 10.27 7.72v14.13l.01-.01L123.67.2h-4.05Z"
-            clipRule="evenodd"
         />
         <path
-            fill={getSemanticValue('logo-subtitle')}
-            fillRule="evenodd"
-            d="M15.08 33.86h.68V31.2h2.98v-.6h-2.98v-1.86H19v-.6h-3.92v5.72Zm8.83.1A2.94 2.94 0 0 0 26.9 31a2.94 2.94 0 0 0-2.98-2.96A2.93 2.93 0 0 0 20.95 31c0 1.66 1.3 2.95 2.96 2.95Zm.01-.63c-1.3 0-2.27-1-2.27-2.34 0-1.33.96-2.33 2.27-2.33 1.3 0 2.26 1.01 2.26 2.33 0 1.33-.97 2.34-2.26 2.34Zm9.89.53-1.71-2.52c.9-.14 1.5-.75 1.5-1.6 0-.95-.76-1.6-1.9-1.6h-2.3v5.72h.67v-2.5h1.28l1.67 2.5h.79Zm-3.74-5.12h1.6c.76 0 1.24.4 1.24 1.02 0 .61-.48.98-1.24.98h-1.6v-2ZM43.5 30.9c.48-.24.77-.66.77-1.22 0-.92-.67-1.54-1.7-1.54h-2.55v5.73h2.46c1.14 0 1.9-.63 1.9-1.56 0-.65-.32-1.15-.88-1.4Zm-1-2.15c.7 0 1.08.34 1.08.97 0 .57-.38.88-1.08.88h-1.8v-1.85h1.8Zm-.09 4.51H40.7V31.2h1.72c.82 0 1.27.39 1.27 1.08 0 .62-.45.97-1.27.97Zm6.93.7c1.35 0 2.37-.84 2.37-2.36v-3.46h-.68v3.5c0 1.15-.75 1.7-1.69 1.7-.95 0-1.7-.55-1.7-1.7v-3.5h-.68v3.46c0 1.52 1 2.36 2.38 2.36Zm6.94 0c1.09 0 1.92-.63 1.92-1.6 0-.83-.63-1.24-1.4-1.59l-.66-.3c-.56-.25-.97-.44-.97-.96 0-.57.53-.84 1.08-.84.6 0 1.08.26 1.4.77l.47-.4c-.32-.6-1-1-1.86-1-.96 0-1.8.6-1.8 1.5 0 .86.72 1.25 1.35 1.54l.68.3c.52.23 1.01.45 1.01 1 0 .59-.52.96-1.23.96a1.9 1.9 0 0 1-1.7-1.02l-.5.38c.43.81 1.2 1.26 2.2 1.26Zm4.54-.1h.68v-5.71h-.68v5.72Zm7.64-5.72v4.41l-3.73-4.45h-.36v5.77h.68v-4.4l3.72 4.44h.37v-5.77h-.68Zm3.56 5.73h4.04v-.6h-3.37V31.2h3.05v-.61h-3.05v-1.85h3.33v-.6h-4v5.72Zm8.38.1c1.09 0 1.92-.64 1.92-1.6 0-.84-.63-1.25-1.4-1.6l-.66-.3c-.56-.25-.97-.44-.97-.96 0-.57.52-.84 1.08-.84.6 0 1.08.26 1.4.77l.47-.4c-.33-.6-1-1-1.86-1-.96 0-1.8.6-1.8 1.5 0 .86.72 1.25 1.35 1.54l.67.3c.53.23 1.02.45 1.02 1 0 .59-.52.96-1.23.96a1.9 1.9 0 0 1-1.7-1.02l-.5.38c.43.81 1.2 1.26 2.2 1.26Zm6.27 0c1.09 0 1.92-.64 1.92-1.6 0-.84-.63-1.25-1.4-1.6l-.66-.3c-.56-.25-.97-.44-.97-.96 0-.57.52-.84 1.08-.84.6 0 1.08.26 1.4.77l.47-.4c-.33-.6-1-1-1.86-1-.96 0-1.8.6-1.8 1.5 0 .86.72 1.25 1.35 1.54l.67.3c.53.23 1.02.45 1.02 1 0 .59-.52.96-1.23.96a1.9 1.9 0 0 1-1.7-1.02l-.5.38c.43.81 1.2 1.26 2.2 1.26Z"
-            clipRule="evenodd"
+            d="M501.885 24.498L456.552 88.0003H465.707C479.684 88.0003 486.672 88.0003 491.806 84.8541C494.678 83.094 497.093 80.6793 498.853 77.8072C502 72.6725 502 65.684 502 51.7076V36.293C502 31.6541 502 27.7852 501.885 24.498Z"
+            fill={getSemanticValue('logo-now')}
         />
     </svg>
 ));