Plan Icon: Update and use the component on My Plan page

#### Problem
Even though currently there is a [`PlanIcon` component](https://github.com/Automattic/jetpack/tree/8d8cbec66b759759207bab4300098353237bd894/_inc/client/components/plans/plan-icon) in the codebase, it's used only in the [`Banner` component](https://github.com/Automattic/jetpack/blob/2fee69dd0a32f6e353cc4d47417d7ac8aa83b9c6/_inc/client/components/banner/index.jsx#L83).

Ideally we would use it in every time a plan icon is used, e.g. on the My Plan page ([instead of using hard-coded images paths](https://github.com/Automattic/jetpack/blob/master/_inc/client/my-plan/my-plan-header/index.js#L42)).

The problem is that those icons are different visually. E.g. here's the Personal plan icon rendered by `PlanIcon`:

And here's the same Personal plan icon rendered on My Plan page:

I guess the second icon is the most up-to-date.

#### Solution
- [ ] Update `PlanIcon` to use the new icons for each plan
- [ ] Add Jetpack Backup icons to `PlanIcon`
- [ ] Replace the hard-coded icons on My Plan page with the `PlanIcon`
- [ ] *Optionally:* rename the `PlanIcon` to `ProductIcon` so that it's more generic

#### Additional context
This has been discovered when working on adding Jetpack Backup to the My Plan page ([here's the relevant PR](https://github.com/Automattic/jetpack/pull/14121)).