Brand system · Icons

Interface icons

Twenty-five quiet line icons for events, programmes and navigation. One stroke, one grid, one corner style, so they sit beside Libre Baskerville without competing with it. Icons label things. They never decorate, and the leaf symbol is never one of them.

The set

25 icons at 24px

Each icon is a single SVG in icons/<name>.svg, and all of them live in the sprite icons/icons.svg as #i-<name>. They draw in currentColor, so they take the colour of the text around them.

calendarCalendar / event
locationLocation
clockClock / time
peoplePeople / community
personPerson / mentor
bookBook / reading group
courseCourse / technical
governanceGovernance
researchResearch
microphoneTalk / speaker session
videoVideo / online
globeGlobe / language
compassCareer / compass
certificateCertificate
mailMail
arrow-rightArrow right
arrow-up-rightExternal link
chevron-downChevron down
checkCheck
closeClose
menuMenu
searchSearch
plusPlus
infoInfo
alertAlert
<svg width="24" height="24" aria-hidden="true"><use href="../icons/icons.svg#i-calendar"/></svg>

Sizes

16, 20, 24 and 32

Draw at 24 and scale. The stroke scales with the icon, so 16px reads as fine detail inside text and 32px as a lighter feature mark. Below 16px, use a word instead.

16 · inline with meta text
20 · buttons and fields
24 · default, lists and nav
32 · feature marks

In use

Tiles, buttons and rows

The 44px tile is the one container for a standalone icon: crimson on red-soft on paper, the level accent on dark panels.

.icon-tile · 44px, 12px radius, icon at 22px
.icon-tile.dark · on Level surfaces, takes the level accent
Apply now Add to calendar
Read the syllabus Search
In buttons the icon is 18px with an 8px gap. Arrows go after the label, objects before it. One icon per button.
  • Saturday 14 November, 2026Date
  • 10:30 to 13:00 ISTTime
  • IISc Bengaluru, Faculty HallVenue
  • Also streamed onlineFormat
  • English, with Hindi Q&ALanguage

Construction

One grid, one stroke

New icons are drawn on the same 24-unit grid with the same rules. If a new icon needs a fill, a second stroke weight or a flourish to read, the idea is wrong, not the rules.

02122224
2px safe padding Keylines 1.6 stroke
Canvas24 × 24 viewBox. Nothing is drawn outside 2 to 22; the outer 2 units are padding.
KeylinesCircle Ø20, square 18 × 18, portrait 16 × 20, landscape 20 × 16. Match the keyline for the shape so a round icon and a square one look the same size.
Stroke1.6 units, currentColor, round caps and round joins. Never a second weight in the same icon.
CornersRectangles take a 2 to 2.5 radius; small inner shapes take 1. No sharp outer corners.
FillsNone, except a tiny dot of radius 1 (the dot in info and alert).
GeometryWhole and half units, straight lines and true arcs. Keep it to the fewest strokes that still say the thing.
ColourInk on paper; crimson only inside a red-soft tile, a list marker or a link. On dark panels, use the level accent.
AccessibilityDecorative icons get aria-hidden="true". An icon-only button needs an aria-label and a 44px hit area.

Do and don't

Keep them quiet

Do

Use one stroke weight and the round joins from the set.

10:30 IST
Do

Pair an icon with a word. The word carries the meaning.

Do

Use the 44px tile when an icon stands alone on a card.

Do

Use the up-right arrow only for links that leave the site.

Don't

Fill icons or mix filled and line styles.

Don't

Change the stroke weight or use sharp, square corners.

Don't

Add playful marks like sparkles or bulbs, and never use the leaf symbol as an icon.

Don't

Colour-code icons. They take the text colour, or crimson in a tile.