Skip to content

Commit be9bec6

Browse files
stevedylandevstevedylandev
committed
chore: updated icons to openzeppelin standard issue
1 parent 2b40690 commit be9bec6

14 files changed

+443
-16
lines changed

‎src/app/layout.config.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
2-
import { GlobeIcon, HomeIcon, MessagesSquareIcon } from "lucide-react";
2+
import { GlobeIcon, HomeIcon, MessageSquareMoreIcon } from "lucide-react";
33

44
/**
55
* Shared layout configurations
@@ -104,7 +104,7 @@ export const baseOptions: BaseLayoutProps = {
104104
{
105105
text: "Forum",
106106
url: "https://forum.openzeppelin.com",
107-
icon: <MessagesSquareIcon />,
107+
icon: <MessageSquareMoreIcon />,
108108
},
109109
{
110110
text: "Website",

‎src/app/page.tsx‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ import {
2121
StellarIcon,
2222
UniswapIcon,
2323
ZamaIcon,
24+
ContractsLibraryIcon,
25+
ContractsMcpIcon,
26+
ContractsUpgradesIcon,
27+
ContractsWizardIcon,
28+
EthernautIcon,
29+
MonitorIcon,
30+
RelayersIcon,
31+
TransactionProposalIcon,
32+
AnnotationDotsIcon,
2433
} from "@/components/icons";
2534
import {
2635
HeroCard,
@@ -54,7 +63,7 @@ export default function HomePage() {
5463
{/* Primary Hero: OpenZeppelin Contracts */}
5564
<HeroCard
5665
href="/contracts"
57-
icon={<LibraryIcon size={32} />}
66+
icon={<ContractsLibraryIcon className="h-12 w-12" />}
5867
title="OpenZeppelin Solidity Contracts"
5968
description="The world's most popular library of Solidity contracts for Ethereum and EVM blockchains. Battle-tested, community-reviewed, and trusted by thousands of projects worldwide."
6069
/>
@@ -63,21 +72,21 @@ export default function HomePage() {
6372
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
6473
<FeatureCard
6574
href="/upgrade-plugins"
66-
icon={<ArrowUpIcon size={20} />}
75+
icon={<ContractsUpgradesIcon className="h-8 w-8" />}
6776
title="Upgrades Plugins"
6877
description="Deploy and manage upgradeable contracts with built-in safety checks and best practices"
6978
/>
7079

7180
<FeatureCard
7281
href="/wizard"
73-
icon={<WandSparklesIcon size={20} />}
82+
icon={<ContractsWizardIcon className="h-8 w-8" />}
7483
title="Contracts Wizard"
7584
description="Interactive smart contract generator with security best practices built-in"
7685
/>
7786

7887
<FeatureCard
7988
href="https://mcp.openzeppelin.com"
80-
icon={<WrenchIcon size={20} />}
89+
icon={<ContractsMcpIcon className="h-8 w-8" />}
8190
title="Contracts MCP"
8291
description="AI-powered assistant for smart contract development and security analysis"
8392
/>
@@ -98,15 +107,15 @@ export default function HomePage() {
98107
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
99108
<FeatureCard
100109
href="/openzeppelin-relayer"
101-
icon={<SatelliteDishIcon size={20} />}
110+
icon={<RelayersIcon className="h-8 w-8" />}
102111
title="Relayer"
103112
description="Enable gasless transactions and automate smart contract operations. Build better user experiences with meta-transactions and scheduled executions."
104113
glowColor="tools"
105114
/>
106115

107116
<FeatureCard
108117
href="/openzeppelin-monitor"
109-
icon={<ActivityIcon size={20} />}
118+
icon={<MonitorIcon className="h-8 w-8" />}
110119
title="Monitor"
111120
description="Real-time monitoring and alerting for your smart contracts. Get notified about important events, transactions, and state changes across multiple chains."
112121
glowColor="tools"
@@ -117,7 +126,7 @@ export default function HomePage() {
117126
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
118127
<FeatureCard
119128
href="/contracts-ui-builder"
120-
icon={<WallpaperIcon size={20} />}
129+
icon={<TransactionProposalIcon className="h-8 w-8" />}
121130
title="UI Builder"
122131
description="Create user interfaces for deployed contracts"
123132
/>
@@ -149,31 +158,31 @@ export default function HomePage() {
149158
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
150159
<EcosystemCard
151160
href="/contracts"
152-
icon={<EthereumIcon color className="w-5 h-5" />}
161+
icon={<EthereumIcon color className="w-6 h-6" />}
153162
title="Ethereum & EVM"
154163
description="Solidity smart contracts for Ethereum and EVM-compatible chains"
155164
glowColor="evm"
156165
/>
157166

158167
<EcosystemCard
159168
href="/cairo-contracts"
160-
icon={<StarknetIcon color className="w-5 h-5" />}
169+
icon={<StarknetIcon color className="w-7 h-7" />}
161170
title="Starknet"
162171
description="Essential contracts library written in Cairo for Starknet"
163172
glowColor="starknet"
164173
/>
165174

166175
<EcosystemCard
167176
href="/contracts-stylus"
168-
icon={<ArbitrumIcon color className="w-5 h-5" />}
177+
icon={<ArbitrumIcon color className="w-7 h-7" />}
169178
title="Arbitrum Stylus"
170179
description="Essential contracts library for Arbitrum Stylus written in Rust"
171180
glowColor="rust"
172181
/>
173182

174183
<EcosystemCard
175184
href="/uniswap-hooks"
176-
icon={<UniswapIcon color className="w-5 h-5" />}
185+
icon={<UniswapIcon color className="w-7 h-7" />}
177186
title="Uniswap Hooks"
178187
description="Advanced Uniswap V4 hooks in Solidity"
179188
glowColor="uniswap"
@@ -197,7 +206,7 @@ export default function HomePage() {
197206

198207
<EcosystemCard
199208
href="/substrate-runtimes"
200-
icon={<PolkadotIcon color className="w-5 h-5" />}
209+
icon={<PolkadotIcon color className="w-7 h-7" />}
201210
title="Polkadot"
202211
description="ink! smart contracts for Polkadot and Substrate chains"
203212
glowColor="polkadot"
@@ -225,7 +234,7 @@ export default function HomePage() {
225234
{/* Ethernaut CTF as standalone */}
226235
<BannerCard
227236
href="https://ethernaut.openzeppelin.com/"
228-
icon={<GamepadIcon size={32} />}
237+
icon={<EthernautIcon className="h-12 w-12" />}
229238
title="Ethernaut CTF"
230239
description="Learn smart contract security by hacking! A Web3/Solidity based capture-the-flag game where each level is a smart contract that needs to be 'hacked'. Perfect for learning vulnerabilities and security best practices through hands-on challenges."
231240
badge="Interactive Learning"
@@ -246,7 +255,7 @@ export default function HomePage() {
246255
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
247256
<CommunityCard
248257
href="https://forum.openzeppelin.com/"
249-
icon={<MessageCircleIcon size={24} />}
258+
icon={<AnnotationDotsIcon className="h-8 w-8" />}
250259
title="Forum"
251260
description="Deep technical discussions, architectural questions, and detailed support. Best place for in-depth conversations about smart contract development, security patterns, and implementation details."
252261
/>

‎src/components/icons/annotation-dots-icon.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export function AnnotationDotsIcon({ className }: { className: string }) {
2+
return (
3+
<svg
4+
width="1em"
5+
height="1em"
6+
viewBox="0 0 25 25"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
className={className}
10+
>
11+
<title>Annotation Dots Icon</title>
12+
<path
13+
d="M4.8667 7.20378C4.8667 6.09211 5.76789 5.19092 6.87956 5.19092H17.4471C18.5587 5.19092 19.4599 6.09211 19.4599 7.20378V15.7584C19.4599 16.8701 18.5587 17.7713 17.4471 17.7713H14.8052L12.1633 19.7841L9.52144 17.7713H6.87956C5.76789 17.7713 4.8667 16.8701 4.8667 15.7584V7.20378Z"
14+
stroke="currentColor"
15+
strokeWidth="1.50964"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
<path
20+
d="M9.64705 11.4811C9.64705 11.759 9.42176 11.9843 9.14384 11.9843C8.86592 11.9843 8.64062 11.759 8.64062 11.4811C8.64062 11.2032 8.86592 10.9779 9.14384 10.9779C9.42176 10.9779 9.64705 11.2032 9.64705 11.4811Z"
21+
stroke="currentColor"
22+
strokeWidth="1.00643"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
25+
/>
26+
<path
27+
d="M12.6661 11.4811C12.6661 11.759 12.4408 11.9843 12.1629 11.9843C11.885 11.9843 11.6597 11.759 11.6597 11.4811C11.6597 11.2032 11.885 10.9779 12.1629 10.9779C12.4408 10.9779 12.6661 11.2032 12.6661 11.4811Z"
28+
stroke="currentColor"
29+
strokeWidth="1.00643"
30+
strokeLinecap="round"
31+
strokeLinejoin="round"
32+
/>
33+
<path
34+
d="M15.6856 11.4811C15.6856 11.759 15.4603 11.9843 15.1824 11.9843C14.9045 11.9843 14.6792 11.759 14.6792 11.4811C14.6792 11.2032 14.9045 10.9779 15.1824 10.9779C15.4603 10.9779 15.6856 11.2032 15.6856 11.4811Z"
35+
stroke="currentColor"
36+
strokeWidth="1.00643"
37+
strokeLinecap="round"
38+
strokeLinejoin="round"
39+
/>
40+
</svg>
41+
);
42+
}

‎src/components/icons/contracts-library-alt-icon.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
export function ContractsLibraryAltIcon({ className }: { className: string }) {
2+
return (
3+
<svg
4+
width="1em"
5+
height="1em"
6+
viewBox="0 0 29 29"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
className={className}
10+
>
11+
<title>Contracts Library Alt Icon</title>
12+
<path
13+
d="M6.22598 9.2644H6.00818C5.03403 9.2644 4.24432 10.0541 4.24432 11.0283V18.1206C4.24432 19.0947 5.03403 19.8845 6.00818 19.8845H6.22598"
14+
stroke="currentColor"
15+
strokeWidth="1.56516"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
<path
20+
d="M23.4551 9.2644H23.7205C24.6947 9.2644 25.4844 10.0541 25.4844 11.0283V18.1206C25.4844 19.0947 24.6947 19.8845 23.7205 19.8845H23.4551"
21+
stroke="currentColor"
22+
strokeWidth="1.56516"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
25+
/>
26+
<rect
27+
x="8.71033"
28+
y="6.56512"
29+
width="12.3083"
30+
height="16.0188"
31+
rx="1.76386"
32+
stroke="currentColor"
33+
strokeWidth="1.56516"
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
/>
37+
<path
38+
d="M12.2049 9.81479L14.1406 11.7505L12.2049 13.6862"
39+
stroke="currentColor"
40+
strokeWidth="1.56516"
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
/>
44+
</svg>
45+
);
46+
}

‎src/components/icons/contracts-library-icon.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
export function ContractsLibraryIcon({ className }: { className: string }) {
2+
return (
3+
<svg
4+
width="1em"
5+
height="1em"
6+
viewBox="0 0 29 29"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
className={className}
10+
>
11+
<title>Contracts Library Icon</title>
12+
<path
13+
d="M6.22598 9.2644H6.00818C5.03403 9.2644 4.24432 10.0541 4.24432 11.0283V18.1206C4.24432 19.0947 5.03403 19.8845 6.00818 19.8845H6.22598"
14+
stroke="currentColor"
15+
strokeWidth="1.56516"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
<path
20+
d="M23.4551 9.2644H23.7205C24.6947 9.2644 25.4844 10.0541 25.4844 11.0283V18.1206C25.4844 19.0947 24.6947 19.8845 23.7205 19.8845H23.4551"
21+
stroke="currentColor"
22+
strokeWidth="1.56516"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
25+
/>
26+
<rect
27+
x="8.71033"
28+
y="6.56512"
29+
width="12.3083"
30+
height="16.0188"
31+
rx="1.76386"
32+
stroke="currentColor"
33+
strokeWidth="1.56516"
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
/>
37+
<path
38+
d="M12.2049 9.81479L14.1406 11.7505L12.2049 13.6862"
39+
stroke="currentColor"
40+
strokeWidth="1.56516"
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
/>
44+
</svg>
45+
);
46+
}

‎src/components/icons/contracts-mcp-icon.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
export function ContractsMcpIcon({ className }: { className: string }) {
2+
return (
3+
<svg
4+
width="1em"
5+
height="1em"
6+
viewBox="0 0 29 28"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
className={className}
10+
>
11+
<title>Contracts MCP Icon</title>
12+
<path
13+
d="M22.0887 9.58612C22.0887 8.02291 22.0887 7.24131 21.7814 6.64425C21.511 6.11905 21.0796 5.69206 20.549 5.42446C19.9458 5.12024 19.1562 5.12024 17.5769 5.12024H11.5611C9.9818 5.12024 9.19216 5.12024 8.58895 5.42446C8.05835 5.69206 7.62696 6.11905 7.35661 6.64425C7.04926 7.24131 7.04926 8.02291 7.04926 9.58612V18.3491C7.04926 19.9123 7.04926 20.6939 7.35661 21.291C7.62696 21.8162 8.05835 22.2432 8.58895 22.5108C9.19216 22.815 9.9818 22.815 11.5611 22.815H13.8934"
14+
stroke="currentColor"
15+
strokeWidth="1.39027"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
<path
20+
fillRule="evenodd"
21+
clipRule="evenodd"
22+
d="M18.4411 9.66927C18.1192 9.35594 17.6877 9.18062 17.2384 9.18062C16.7892 9.18062 16.3577 9.35594 16.0357 9.66927L9.6217 15.9594C9.51436 16.0637 9.37058 16.122 9.2209 16.122C9.07122 16.122 8.92744 16.0637 8.82011 15.9594C8.76756 15.9083 8.72579 15.8471 8.69727 15.7796C8.66875 15.7121 8.65405 15.6395 8.65405 15.5662C8.65405 15.4929 8.66875 15.4204 8.69727 15.3528C8.72579 15.2853 8.76756 15.2242 8.82011 15.1731L15.2341 8.88301C15.7707 8.36088 16.4898 8.06873 17.2384 8.06873C17.9871 8.06873 18.7062 8.36088 19.2427 8.88301C19.5532 9.18493 19.7877 9.55606 19.9272 9.96605C20.0666 10.376 20.107 10.8132 20.045 11.2418C20.4793 11.18 20.9219 11.2188 21.3388 11.3551C21.7558 11.4914 22.1358 11.7217 22.4497 12.0281L22.4831 12.0614C22.7458 12.3169 22.9546 12.6225 23.0973 12.9601C23.2399 13.2977 23.3133 13.6605 23.3133 14.027C23.3133 14.3935 23.2399 14.7563 23.0973 15.0939C22.9546 15.4315 22.7458 15.7372 22.4831 15.9927L16.682 21.6811C16.6645 21.6981 16.6506 21.7184 16.6411 21.7409C16.6316 21.7634 16.6267 21.7876 16.6267 21.812C16.6267 21.8364 16.6316 21.8606 16.6411 21.8831C16.6506 21.9056 16.6645 21.9259 16.682 21.9429L17.8734 23.1117C17.926 23.1628 17.9678 23.2239 17.9963 23.2914C18.0248 23.3589 18.0395 23.4315 18.0395 23.5048C18.0395 23.5781 18.0248 23.6506 17.9963 23.7182C17.9678 23.7857 17.926 23.8468 17.8734 23.8979C17.7661 24.0022 17.6223 24.0606 17.4726 24.0606C17.323 24.0606 17.1792 24.0022 17.0718 23.8979L15.8805 22.7299C15.7578 22.6106 15.6602 22.468 15.5936 22.3104C15.527 22.1528 15.4927 21.9834 15.4927 21.8123C15.4927 21.6412 15.527 21.4719 15.5936 21.3143C15.6602 21.1567 15.7578 21.014 15.8805 20.8948L21.6815 15.2057C21.839 15.0524 21.9643 14.869 22.0498 14.6664C22.1353 14.4639 22.1794 14.2462 22.1794 14.0264C22.1794 13.8065 22.1353 13.5888 22.0498 13.3863C21.9643 13.1837 21.839 13.0003 21.6815 12.847L21.6482 12.8143C21.3266 12.5013 20.8956 12.326 20.4468 12.3256C19.9981 12.3253 19.5668 12.4999 19.2447 12.8123L14.4659 ..."
23+
fill="currentColor"
24+
stroke="currentColor"
25+
strokeWidth="0.234774"
26+
/>
27+
<path
28+
fillRule="evenodd"
29+
clipRule="evenodd"
30+
d="M17.6395 11.2418C17.6921 11.1907 17.7338 11.1296 17.7624 11.0621C17.7909 10.9945 17.8056 10.922 17.8056 10.8487C17.8056 10.7754 17.7909 10.7028 17.7624 10.6353C17.7338 10.5678 17.6921 10.5067 17.6395 10.4556C17.5322 10.351 17.3882 10.2925 17.2384 10.2925C17.0886 10.2925 16.9446 10.351 16.8373 10.4556L12.0937 15.1078C11.831 15.3633 11.6221 15.6689 11.4795 16.0066C11.3369 16.3442 11.2634 16.707 11.2634 17.0735C11.2634 17.44 11.3369 17.8028 11.4795 18.1404C11.6221 18.478 11.831 18.7836 12.0937 19.0391C12.6303 19.5611 13.3494 19.8531 14.098 19.8531C14.8466 19.8531 15.5657 19.5611 16.1023 19.0391L20.8465 14.3869C20.8991 14.3358 20.9408 14.2746 20.9694 14.2071C20.9979 14.1396 21.0126 14.067 21.0126 13.9937C21.0126 13.9204 20.9979 13.8479 20.9694 13.7803C20.9408 13.7128 20.8991 13.6517 20.8465 13.6006C20.7392 13.4961 20.5952 13.4376 20.4454 13.4376C20.2956 13.4376 20.1516 13.4961 20.0443 13.6006L15.3007 18.2529C14.9788 18.5662 14.5473 18.7415 14.098 18.7415C13.6488 18.7415 13.2172 18.5662 12.8953 18.2529C12.7377 18.0995 12.6125 17.9161 12.527 17.7136C12.4415 17.511 12.3974 17.2933 12.3974 17.0735C12.3974 16.8536 12.4415 16.6359 12.527 16.4334C12.6125 16.2308 12.7377 16.0474 12.8953 15.8941L17.6395 11.2418Z"
31+
fill="currentColor"
32+
stroke="currentColor"
33+
strokeWidth="0.234774"
34+
/>
35+
</svg>
36+
);
37+
}

‎src/components/icons/contracts-upgrades-icon.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
export function ContractsUpgradesIcon({ className }: { className: string }) {
2+
return (
3+
<svg
4+
width="1em"
5+
height="1em"
6+
viewBox="0 0 29 29"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
className={className}
10+
>
11+
<title>Contracts Upgrades Icon</title>
12+
<path
13+
d="M6.22598 9.2644H6.00818C5.03403 9.2644 4.24432 10.0541 4.24432 11.0283V18.1206C4.24432 19.0947 5.03403 19.8845 6.00818 19.8845H6.22598"
14+
stroke="currentColor"
15+
strokeWidth="1.56516"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
<path
20+
d="M23.4551 9.2644H23.7205C24.6947 9.2644 25.4844 10.0541 25.4844 11.0283V18.1206C25.4844 19.0947 24.6947 19.8845 23.7205 19.8845H23.4551"
21+
stroke="currentColor"
22+
strokeWidth="1.56516"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
25+
/>
26+
<rect
27+
x="8.71033"
28+
y="6.56512"
29+
width="12.3083"
30+
height="16.0188"
31+
rx="1.76386"
32+
stroke="currentColor"
33+
strokeWidth="1.56516"
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
/>
37+
<path
38+
d="M12.2049 9.81479L14.1406 11.7505L12.2049 13.6862"
39+
stroke="currentColor"
40+
strokeWidth="1.56516"
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
/>
44+
<path
45+
d="M16.7951 9.81479L14.8594 11.7505L16.7951 13.6862"
46+
stroke="currentColor"
47+
strokeWidth="1.56516"
48+
strokeLinecap="round"
49+
strokeLinejoin="round"
50+
/>
51+
</svg>
52+
);
53+
}

0 commit comments

Comments
 (0)