Summary
On the repository details page (RepositoryDetailsPage), the Issues and Pull Requests tabs used Material UI icons (BugReportIcon and MergeTypeIcon) that do not match the icons GitHub shows for the same tabs. Users who switch between GitHub and Gittensor get visually inconsistent navigation cues: the Issues tab looked like a generic “bug report” rather than GitHub’s issue-opened mark, and the PR tab used a merge metaphor instead of GitHub’s git-pull-request icon.
Motivation
Repository browsing is intentionally aligned with GitHub workflows—same tab names, same mental model. When tab glyphs diverge from GitHub, the UI feels subtly wrong even when labels are correct, and power users rely on icon recognition as much as text. Consistency with github.com for these two tabs reduces friction and avoids the impression that Issues and PRs are “different product areas” than on GitHub.
Why MUI icons were not sufficient
@mui/icons-material is built on Material Design’s icon set, which optimizes for generic meanings across Android and Google products, not for GitHub’s navigation vocabulary.
-
Issues: MUI offers shapes like BugReportIcon, but GitHub’s repo Issues tab uses the Issue opened octicon (a distinct silhouette). There is no Material icon that reproduces that mark; using a bug icon is a different symbol and reads as “debug” or “defect” to many users rather than “issues list.”
-
Pull requests: MUI’s MergeTypeIcon suggests merge direction / VCS merge, not the pull request affordance GitHub uses (GitPullRequestIcon). Material does not ship a first-class pull request glyph equivalent to GitHub’s; approximations stay semantically and visually off.
Because the product goal was parity with GitHub’s tab bar, the fix required icons from GitHub’s own set—@primer/octicons-react—rather than stretching MUI metaphors that will never match GitHub’s pixels or meaning.
Summary
On the repository details page (
RepositoryDetailsPage), the Issues and Pull Requests tabs used Material UI icons (BugReportIconandMergeTypeIcon) that do not match the icons GitHub shows for the same tabs. Users who switch between GitHub and Gittensor get visually inconsistent navigation cues: the Issues tab looked like a generic “bug report” rather than GitHub’s issue-opened mark, and the PR tab used a merge metaphor instead of GitHub’s git-pull-request icon.Motivation
Repository browsing is intentionally aligned with GitHub workflows—same tab names, same mental model. When tab glyphs diverge from GitHub, the UI feels subtly wrong even when labels are correct, and power users rely on icon recognition as much as text. Consistency with github.com for these two tabs reduces friction and avoids the impression that Issues and PRs are “different product areas” than on GitHub.
Why MUI icons were not sufficient
@mui/icons-materialis built on Material Design’s icon set, which optimizes for generic meanings across Android and Google products, not for GitHub’s navigation vocabulary.Issues: MUI offers shapes like
BugReportIcon, but GitHub’s repo Issues tab uses the Issue opened octicon (a distinct silhouette). There is no Material icon that reproduces that mark; using a bug icon is a different symbol and reads as “debug” or “defect” to many users rather than “issues list.”Pull requests: MUI’s
MergeTypeIconsuggests merge direction / VCS merge, not the pull request affordance GitHub uses (GitPullRequestIcon). Material does not ship a first-class pull request glyph equivalent to GitHub’s; approximations stay semantically and visually off.Because the product goal was parity with GitHub’s tab bar, the fix required icons from GitHub’s own set—
@primer/octicons-react—rather than stretching MUI metaphors that will never match GitHub’s pixels or meaning.