Pepicons Pencil
Browse 1,275 free Pepicons Pencil. Download SVG icon, copy as JSX, PNG or Base64. CC BY 4.0 licensed. Designed by CyCraft.
About Pepicons Pencil
Created By
CyCraftVisit Website
Version
3.1.1
License
CC BY 4.0View License
Color Support
Monochrome
Category
UI Other / Mixed Grid
Copy & Download Pepicons Pencil
Click any icon above to open the detail panel. Four export formats are available instantly, no sign-up required.
SVG
Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.
JSX / TSX
React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.
PNG
Raster export at 1x, 2x and 3x for email templates, Figma imports, app assets, and Open Graph images.
Base64
Inline data URI — embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.
Works with shadcn/ui
Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install and use via @iconify/react, fully tree-shakeable, no icon font loading required.
How to use Pepicons Pencil
Pepicons Pencil are available through Iconify, so you can drop them into React, Vue, Svelte, or plain HTML without downloading individual files. Pick the method that matches your stack below.
React
Install the Iconify React component:
npm install @iconify/reactThen import and use any Pepicons Pencil by its name:
import { Icon } from '@iconify/react';
export default function App() {
return <Icon icon="pepicons-pencil:[icon-name]" />;
}Vue
Install the Iconify Vue component:
npm install @iconify/vueThen register and use it in your component:
<script>
import { Icon } from '@iconify/vue';
</script>
<template>
<Icon icon="pepicons-pencil:[icon-name]" />
</template>Svelte
Install the Iconify Svelte component:
npm install @iconify/svelteThen import and use it in your .svelte file:
<script>
import IconifyIcon from '@iconify/svelte';
</script>
<IconifyIcon icon="pepicons-pencil:[icon-name]" />HTML
No installation needed — load the Iconify script from a CDN and reference icons directly in your markup:
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@latest/dist/iconify-icon.min.js"></script>
<iconify-icon icon="pepicons-pencil:[icon-name]" height="36"></iconify-icon>