Below is the code for the Header on my LWC page. I am trying to reference the Standard channel_program_members icon. After a lot of tinkering I got it to display however the background color is missing. Conversely if I use the Account Icon only the background is displayed.

enter image description here

   <div class="slds-page-header slds-m-bottom_x-small">
    <div class="slds-page-header__row">
      <div class="slds-page-header__col-title">
        <div class="slds-media">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-channel_program_members" title="screening">
                <svg xmlns="http://www.w3.org/2000/svg" class="slds-icon" aria-hidden="true">
                    <use xlink:href="/_slds/icons/standard-sprite/svg/symbols.svg#channel_program_members"></use>
              <span class="slds-assistive-text">screening</span>
          <div class="slds-media__body">
            <div class="slds-page-header__name">
              <div class="slds-page-header__name-title">
                    <span>Candidate Scrrening</span>
                    <span class="slds-page-header__title slds-truncate" title="test">{HeaderTitle}</span>

1 Answer 1


I believe its better to use lightning-icon component instead of svg. Maybe it will help?

    alternative-text="channel program members" 
    title="channel program members">


  • 1
    That worked - thanks! Oct 4, 2022 at 18:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .