Blocks Icons

A comprehensive icon library for the Chainlink Blocks design system. This package provides a collection of SVG icons that can be used across Chainlink applications.

Note: This package is in active development and may change.

Features

• SVG-based icons: All icons are vector-based for crisp rendering at any size
• TypeScript support: Full type definitions for all icon components
• Customizable: Icons can be styled using CSS classes or inline styles
• Accessible: Icons include proper ARIA attributes and semantic markup
• Tree-shakeable: Only import the icons you need to keep bundle size minimal

Usage

Import any icon and use it in your React components:

import { SvgAdd } from '@chainlink/blocks-icons'

function MyComponent() {
  return (
    <div>
      <SvgAdd width={24} height={24} color="success" />
    </div>
  )
}

Icon sheet

This tutorial represents an educational example to use a Chainlink system, product, or service and is provided to demonstrate how to interact with Chainlink’s systems, products, and services to integrate them into your own. This template is provided “AS IS” and “AS AVAILABLE” without warranties of any kind, it has not been audited, and it may be missing key checks or error handling to make the usage of the system, product or service more clear. Do not use the code in this example in a production environment without completing your own audits and application of best practices. Neither Chainlink Labs, the Chainlink Foundation, nor Chainlink node operators are responsible for unintended outputs that are generated due to errors in code.