Praxis Icons

51 hand-drawn React icons in a 64x64 blueprint style. Built for governance, AI, and learning interfaces - works anywhere you want a precise, technical-feeling icon.

Each icon is a single-stroke SVG with a subtle grid frame, inspired by architectural blueprints and circuit diagrams.

AiRegistryIcon AI registry	RiskAssessmentIcon Risk assessment	PolicyManagerIcon Policy manager	EvidenceIcon Evidence management
AuditTrailIcon Audit trail	ShadowAiIcon Shadow AI detection	LlmEvalIcon LLM evaluations	FrameworkCoverageIcon Framework coverage
ApprovalFlowIcon Approval workflow	ReportingIcon Reporting	AtomIcon AI / generative	PointerIcon Pointer
PaperPlaneIcon Support	GradCapIcon Academy / training	OpenBookIcon Developers	PuzzleIcon Partners
SandboxedIcon Sandboxed	ShieldIcon Security	GearIcon Automation	RocketIcon Launch / deploy
ClockIcon Monitoring	VerifiedCubeIcon Verified	ServerStackIcon Infrastructure	ImpactAssessmentIcon Impact assessment
BiasAuditIcon Bias audit	HumanInLoopIcon Human-in-loop	TrainingDataIcon Training data	IntegrationIcon Integration
IncidentIcon Incident	ModelInventoryIcon Model inventory	AiAdvisorIcon AI advisor	AiDetectionIcon AI detection
VendorIcon Vendor management	TaskListIcon Task management	ModelCardIcon Model card	CodeBracesIcon API / code
GavelIcon Regulation	ComplianceMedalIcon Compliance	CertificateIcon Certificate	CohortIcon Cohort
LiveSessionIcon Live session	SelfPacedIcon Self-paced	CurriculumIcon Curriculum	QuizIcon Quiz
SkillBadgeIcon Skill badge	ClassroomIcon Classroom	MentorIcon Mentor	CompletionIcon Completion
LessonIcon Lesson	WorkshopIcon Workshop

Install

This is a copy-paste library. There's no npm package - just grab the file.

curl -O https://raw.githubusercontent.com/gorkem-bwl/praxis-icons/main/src/index.tsx

Drop index.tsx into your project (e.g. components/praxis-icons.tsx) and import.

Usage

import { RiskAssessmentIcon, PolicyManagerIcon } from "./components/praxis-icons";

export function Example() {
  return (
    <div>
      <RiskAssessmentIcon size={64} className="text-emerald-600" />
      <PolicyManagerIcon size={48} />
    </div>
  );
}

Props

Each icon accepts standard SVGProps plus size (number, default 64).

<RiskAssessmentIcon size={32} className="text-blue-500" />

stroke="currentColor" by default - color via Tailwind utilities or the style prop.

Drop the grid frame

The grid background is intentional for showcase contexts. To skip it (e.g. inside a button or nav), wrap the icon tree in PraxisIconsBare:

import { PraxisIconsBare, RocketIcon } from "./components/praxis-icons";

<PraxisIconsBare>
  <button><RocketIcon size={20} /> Launch</button>
</PraxisIconsBare>

Catalog

All icons are exported individually. There's also a praxisIcons array with { name, Component, hint } for each - useful if you want to render them all in a gallery or pick one programmatically.

import { praxisIcons } from "./components/praxis-icons";

praxisIcons.map(({ name, Component, hint }) => (
  <div key={name}>
    <Component size={64} />
    <p>{name}</p>
    <small>{hint}</small>
  </div>
));

License

MIT - use freely, no attribution required.