diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index c493ab7593..719bbcf30b 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -631,6 +631,7 @@ class SharedRepoListItem extends React.Component {
   };
 
   renderPCUI = () => {
+    const { isStarred } = this.state;
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
     const { repo, currentViewMode } = this.props;
     return currentViewMode == 'list' ? (
@@ -679,14 +680,16 @@ class SharedRepoListItem extends React.Component {
             <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
             <Fragment>
               <Link to={libPath} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
-              <i
-                role="button"
-                title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
-                aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
-                onClick={this.onToggleStarRepo}
-                className={`op-icon library-grid-item-icon ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
-              >
-              </i>
+              {isStarred &&
+                <i
+                  role="button"
+                  title={gettext('Unstar')}
+                  aria-label={gettext('Unstar')}
+                  onClick={this.onToggleStarRepo}
+                  className='op-icon library-grid-item-icon sf3-font-star sf3-font'
+                >
+                </i>
+              }
               {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />}
             </Fragment>
           }
diff --git a/frontend/src/css/files.css b/frontend/src/css/files.css
index bb1c25304b..ac0db358d8 100644
--- a/frontend/src/css/files.css
+++ b/frontend/src/css/files.css
@@ -44,11 +44,3 @@
 .library-grid-item .library-grid-item-icon {
   margin-left: 6px;
 }
-
-.library-grid-item .library-grid-item-icon.sf3-font-star-empty {
-  opacity: 0;
-}
-
-.library-grid-item:hover .library-grid-item-icon.sf3-font-star-empty {
-  opacity: 1;
-}
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js
index ed2e4772a8..f1ca95528a 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -319,6 +319,7 @@ class MylibRepoListItem extends React.Component {
   };
 
   renderPCUI = () => {
+    const { isStarred } = this.state;
     const { repo, currentViewMode = 'list' } = this.props;
     let useBigLibaryIcon = currentViewMode == 'grid';
     let iconUrl = Utils.getLibIconUrl(repo, useBigLibaryIcon);
@@ -392,14 +393,16 @@ class MylibRepoListItem extends React.Component {
           {!this.state.isRenaming && repo.repo_name && (
             <Fragment>
               <Link to={repoURL} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
-              <i
-                role="button"
-                title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
-                aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
-                className={`op-icon library-grid-item-icon ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
-                onClick={this.onToggleStarRepo}
-              >
-              </i>
+              {isStarred &&
+                <i
+                  role="button"
+                  title={gettext('Unstar')}
+                  aria-label={gettext('Unstar')}
+                  className='op-icon library-grid-item-icon sf3-font-star sf3-font'
+                  onClick={this.onToggleStarRepo}
+                >
+                </i>
+              }
               {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} className="op-icon library-grid-item-icon" />}
             </Fragment>
           )}
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index b989180743..9775cfab3e 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -268,6 +268,7 @@ class Item extends Component {
       return null;
     }
 
+    const { isStarred } = this.state;
     const { data, currentViewMode = 'list' } = this.props;
     const useBigLibaryIcon = currentViewMode == 'grid';
     data.icon_url = Utils.getLibIconUrl(data, useBigLibaryIcon);
@@ -338,13 +339,15 @@ class Item extends Component {
             <div className="d-flex align-items-center text-truncate">
               <img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="36" className="mr-2" />
               <Link to={shareRepoUrl} className="text-truncate library-name" title={data.repo_name}>{data.repo_name}</Link>
-              <i
-                role="button"
-                title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
-                aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
-                onClick={this.onToggleStarRepo}
-                className={`op-icon library-grid-item-icon ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
-              ></i>
+              {isStarred &&
+                <i
+                  role="button"
+                  title={gettext('Unstar')}
+                  aria-label={gettext('Unstar')}
+                  onClick={this.onToggleStarRepo}
+                  className='op-icon library-grid-item-icon sf3-font-star sf3-font'
+                ></i>
+              }
               {data.monitored && <RepoMonitoredIcon repoID={data.repo_id} className="op-icon library-grid-item-icon" />}
             </div>