fix: replace icons with pictograms

src/pages/developing/react-tutorial/step-4.mdx

@@ -21,8 +21,8 @@ import Preview from 'components/Preview';
 <PageDescription>
 
 With two pages comprised entirely of Carbon components, let's revisit the
-landing page and build a couple components of our own by using Carbon icons and
-tokens.
+landing page and build a couple components of our own by using Carbon pictograms
+and tokens.
 
 </PageDescription>
 
@@ -246,11 +246,21 @@ Nothing is styled yet, but with our components built let's put them to use. In
 import { InfoSection, InfoCard } from '@/components/Info/Info';
 ```
 
-While we're at the top of `LandingPage`, import the icons that we'll need as
-well.
+Next, we will install the pictograms we will use in the header.
+
+```bash
+yarn add @carbon/pictograms-react
+```
+
+While we're at the top of `LandingPage`, import the pictograms that we'll need
+as well.
 
 ```javascript path=src/app/home/page.js
-import { Globe, Application, PersonFavorite } from '@carbon/react/icons';
+import {
+  Advocate,
+  Globe,
+  AcceleratingTransformation,
+} from '@carbon/pictograms-react';
 ```
 
 With everything imported, replace the current:
@@ -407,12 +417,12 @@ const InfoCard = (props) => {
 ```
 
 Finally, add the declaration block in `_info.scss` to set `InfoCard` body copy
-styles and to bottom-align the icons.
+styles and to bottom-align the pictograms.
 
 ```scss path=src/components/Info/_info.scss
 .info-card__body {
   margin-top: $spacing-06;
-  flex-grow: 1; // fill space so icons are bottom aligned
+  flex-grow: 1; // fill space so pictograms are bottom aligned
   @include type-style('body-long-01');
 
   // prevent large line lengths between small and medium viewports