Iconography

Basics

Setu’s icon style is meant to be simple, minimal and to-the-point. We use icons to often represent pages, infrequently actions, and occasionally, concepts.

And true to our aim to being subtle with our design ideology, we use a stroked line style for all our icons.


Grid

All line-icons use a 24px by 24px square grid and pictograms use a 64px by 64px square grid as the base canvas. Since we use SVGs and only SVGs for iconography, we can get away with using such a small size for our icons assets—they scale infinitely.

Start with a 24×24 pixel grid.

Add a 2px padding on the inside as the bleed area.


Key shapes

Here are a few basic shapes to use as a framework for making icons. Keep in mind these are just guideline shapes, and not a hard and fast rule.

The horizontal and vertical rectangle, and the circle all extend to the bleed area, while the square sits a little smaller, in the centre.

Horizontal and vertical parent shapes.

Square and circle parent shapes.


Drawing icons

We stick to a simple, 2px stroked line style, no fills. Keep the icon geometric, and free of any embellishments that could hinder interpretation.

Sample icon of a mobile

The stroke itself is 2px wide, always.

The stroke alignment is centered for best control.

Make the stroke ends to have rounded caps.

Use rounded edges for the line-joins, avoid sharp outer edges and corners.

Use simple geometry for better pixel alignment.


Crucible Icons

@setu/crucible-icons : ^1.0.12

Alphabets

ArrowInsideBox

ArrowLeft

ArrowRight

ArrowsOpposite

AscendingLines

BadgeWithTickLineIcon

BankLineIcon

BankWithTick

BarChart

Bell

BookLineIcon

BoxWithDownArrow

BoxWithStarLineIcon

Braces

Branch

BreadcrumbsLineIcon

BrickWall

Bridge

Building

BuildingBlock

BuildingWithFlag

CableTv

CalendarLineIcon

Camera

Car

CashLineIcon

CheckboxLineIcon

ChevronDoubleLeft

ChevronDoubleRight

ChevronDown

ChevronLeft

ChevronRight

ChevronUp

CircleWithCrossLineIcon

CircleWithStar

CircleWithTickLineIcon

CircularArrows

ClosedEye

Coin

ColumnsOfRectangle

CreditCard

Cross

Cube

CubeStack

CubeStackWithPlus

Cylinder

DescendingLines

DiagonalArrows

DocumentScroll

DocumentScrollWithPercentage

DocumentWithFold

DropDown

Dustbin

ErrorSign

Eye

EyeWithSlash

Filter

Fist

FolderWithArrowsLineIcon

FolderWithDocument

Gear

GridOfRectangle

HalfCircularArrow

Home

HospitalSign

HourglassLineIcon

Image

Info

InfoPanelLineIcon

InputLineIcon

Landline

LightBulb

Lightning

LineStack

LineWithCircle

LockLineIcon

MagnifyingGlass

MessageWithExclamation

MessageWithRupee

MessageWithTick

Minus

Mobile

MobileWithBraces

MobileWithPen

Modem

Money

Moon

PaintRollerLineIcon

Pan

Passbook

Pause

Pen

PencilWithSign

PhoneReceiver

PieChart

Play

Plug

Plus

ProgressBarLineIcon

RadioButtonLineIcon

RectangleWithLeftArrow

RectangleWithRightArrow

RupeeWithArrows

RupeeWithLoadingArrows

Safe

SendArrow

Shapes

ShieldWithHeart

ShieldWithPlus

ShieldWithTick

SibebarLineIcon

Spanner

SquareStackWithLoadingArrow

SquareWithPen

StoveWithFlame

Sun

SwimTube

Table

TabsLineIcon

TagWithQuestionMark

TextCursor

ThreeDots

ThreeDotsHorizontal

ThreeLines

Tick

ToastLineIcon

ToolboxLineIcon

TrafficLights

TriangleDown

TriangleLeft

TriangleRight

TriangleUp

Tv

TwoRectangles

User

UserGroup

UserWithCrown

UserWithMagnifyingGlass

UserWithSmile

WarningSign

Water

AA

ArrowsOverlapping

BOU

BSA

BadgeWithRibbon

BadgeWithTick

Bank

BankWithBraces

BankWithCoin

BankWithCross

BankWithExclamation

BankWithMagnifyingGlassAndStars

BankWithPerson

BankWithShield

Banking

BarsWithExcalamationMark

7

BeerMug

BillWithTax

Bird

Book

BookWithKarmaSymbol

BoxWithBraces

BoxWithCash

BoxWithCoin

BoxWithLeftArrow

BoxWithMobile

BoxWithRightArrow

BoxWithShapes

BoxWithStar

Brain

Briefcase

BuildingPictogram

BuildingWithFlagPictogram

Buildings

Bulb

COU

CableTV

Calendar

CalloutsWithMultipleScripts

CarPictogram

Cash

CashWithUpArrow

Cat

ChatBot

ChatBubbles

Checklist

Chord

CircleWithCross

CircleWithPlus

CircleWithStarAndLines

CircleWithTick

Clock

CoinWithDownArrow

Courage

Craftsmanship

CreditCardPictogram

CylinderPictogram

Data

Deposits

DocumentWithArrow

DocumentWithBadgeAndTick

DocumentWithCode

DocumentWithCoin

DocumentWithCommas

DocumentWithDetails

DocumentWithGreenTick

DocumentWithKey

DocumentWithLock

DocumentWithRedBadge

DownArrowWithCoin

Droplets

Empathy

Envelope

Fastag

Flag

FlaskWithBraces

FlaskWithCode

FolderWithArrows

FolderWithArrowsAndPaper

FolderWithMagnifyingGlass

FolderWithShield

FunnelWithPlusSymbol

GasPipe

GraphBar

Groceries

GrowthMindset

GuyFawkesMask

Hat

Headphones

HeartWithCross

HomeWithBraces

Hourglass

IdCard

Integrity

Jigsaw

KYC

LandlinePictogram

Lending

Link

Lock

MagnifyingGlassWithRupee

Map

Medal

MessageCallout

Metro

Mic

MobilePlainWithCoin

MobileWithAsync

MobileWithCash

MobileWithCircularArrows

MobileWithCoin

MobileWithCursor

MobileWithGreenTick

MobileWithLightning

MobileWithNotification

MobileWithOffer

MobileWithRupee

MobileWithTag

MobileWithUpi

MobilityCard

ModemPictogram

Necklace

Newspaper

Note

Notepad

ONDC

OpenBoxWithBraces

PaintRoller

PanWithExclamation

PaperWithCoin

Parchment

Payments

People

PeopleWithCoin

PeopleWithColouredHeads

PeopleWithLeader

Person

PersonCardWithSettings

PersonScan

PersonWithCape

PersonWithCard

PersonWithCircularBackground

PersonWithCoin

PersonWithGear

PersonWithHeart

PersonWithMagnifyingGlass

PersonWithPuzzlePiece

PersonWithQuestionMark

PersonWithSettings

PersonWithTools

Plant

PlantWithLeaves

Receipt

ReceiptWithBell

ReceiptWithCoin

RingWithDiamond

Rocket

SIM

ScreenWithPlayButton

Servers

Shield

ShieldWithTickPictogram

ShoppingBags

Signpost

StampWithTick

Stopwatch

SunsetWithCoin

TV

TabletWithPen

Team

Tenacity

ThoughtCloud

Ticket

Tools

Transactions

UPI

UmbrellaWithCoinAndCash

Wave

WebSettings

Window

WindowEmpty

WindowPlainWithPlant

WindowWithBarGraph

WindowWithBlocks

WindowWithBraces

WindowWithBracesAndCog

WindowWithBugAndMagnifyingGlass

WindowWithCodeAndBraces

WindowWithGreenTick

WindowWithInfinity

WindowWithLightning

WindowWithMagnifyingGlass

WindowWithMobile

WindowWithPlayButton

WindowWithSettings

WindowWithUpArrow

WrenchAndScrewDriver

eSign