Update Brave VPN icon

[rebron]

Description

Update the Brave VPN icon.

See Figma for new, on, off, and error states.
https://www.figma.com/design/J4LKBMftiWhqromRWfUQLG/VPN-flows?node-id=2862-22649&t=ZT8xHIPEE4aTwa3q-0

Steps to reproduce

1. Launch Brave.
2. Notice Brave VPN icon in the upper right corner.

Actual result

Expected result

Reproduces how often

Easily reproduced

Brave version (brave://version info)

tbd for target version

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

No response

[MadhaviSeelam]

Verification PASSED using

Brave | 1.75.95 Chromium: 132.0.6834.46 (Official Build) nightly (64-bit)
-- | --
Revision | 1adb0a920ea370950a68a2f4c01280f3097c6c4d
OS | Windows 11 Version 24H2 (Build 26100.2314)

• Installed 1.75.95
• launched Brave
• Confirmed new Brave VPN icon shown in the upper right corner in the toolbar, replacing previous VPN button
• Confirmed Brave VPN icon in various states matched to Figma designs\
  • pre-purchased (on boarding)
  • purchased state (disconnected)
  • connected state
  • error state

On boarding state (a)	On boarding (b)	Disconnected state (Light)	Disconnected state (Dark)	Connected state (Dark)	Connected state (Light)	Error state (Dark)	Error state (Light)

[MadhaviSeelam]

Verification PASSED using

Brave | 1.75.171 Chromium: 132.0.6834.160 (Official Build) (arm64)
-- | --
Revision | d4d146998a285171ea57c3b75c52c7819901571a
OS | macOS Version 15.2 (Build 24C101)

• Installed 1.75.171
• launched Brave
• Confirmed new Brave VPN icon shown in the upper right corner in the toolbar, replacing previous VPN button
• Confirmed Brave VPN icon in various states matched to Figma designs\
  • pre-purchased (on boarding)
  • purchased state (disconnected)
  • connected state
  • error state

Not purchased state

Screen.Recording.2025-02-03.at.4.11.03.PM.mov