Skip to main content
Flowra
PricingCommunityFAQ
JoinStart with Flowra
  • PricingPlans, seats and payment
  • Frequently asked questionsEverything you have asked, in one place
  • Contact usWrite to the right team
  • CommunityKaro Studio, who make Flowra

For your team

  • Marketing teamsCampaigns from brief to launch
  • Product and dev teamsFeatures and bugs with full context
  • Design and content teamsBrief, files and delivery side by side
  • Operations teamsWork, documents and costs you can track
  • Sales and services teamsFrom meeting to contract and payment
  • Remote teamsOnline meeting to delivery, on your time

For your role

  • Project managersAction stories instead of chasing the team
  • Freelancers and consultantsFrom brief to contract and settlement

For your workflow

  • Meeting to actionMeeting decisions as trackable work
  • Actions with financial contextCosts next to the work that caused them
  • Actions with contract contextEvery commitment as trackable work
  • Brief to project deliveryEvery project step, one complete action
See all solutionsStart with FlowraJoin
++
Flowra design system

Fundamentals

PrinciplesVoice and writingCopy rules for each surfaceGlossaryRTL and languagesNumbers and datesAccessibility

Foundations

ColorDark modePrintingTypographySpacing and layoutRadius and shadowLayersMotionNotification soundKeyboard shortcutsIconsService logos

Components

ButtonsText fieldPickerDate and timeCheckboxRadioKeySegmented controlSliderMenu and sheetDialogCard and listTables and data listsBadge, pill, and switchTabs and filtersAvatarEmpty and loading statesProgress and stepsToastFloating helpNavigationPage headerAssistants

Patterns

Connector pageList, filter, and searchForm layoutCreation flowUpgrade promptConfirmation and irreversible actionsPhone layoutFixed bars and scrolling

Brand

Flowra brandMark and logoBrand colorBrand typographyMisuse

Design system/Foundations

Icons

Every icon in the app comes from one source: the paths map in components/icons.tsx, where each is a stroke drawn on a 24px grid and rendered with <Icon>.

In codecomponents/icons.tsx

On this page

  1. Library
  2. Structure
  3. Rules
  4. Size in each place

Library

Every icon is shown here. Search, then tap one to copy its name.

Live example

119 icons

Structure

An icon takes the color of the text around it, so it's correct in every theme and every state. Its size matches the text next to it: 13 next to small text, 15 in a page header pill, 16 in a field.

GridviewBox 0 0 24 24
Stroke widthstrokeWidth 1.7
Line caps and joinsround / round
ColorcurrentColor
Common sizes12 · 13 · 15 · 16 · 20
import { Icon, paths } from "@/components/icons";

<Icon d={paths.calendar} size={15} />

Rules

Do

Add a new icon to paths and read it from there.

Don't

An inline <svg> in the middle of a component; no one will ever find it again.

Do

An icon alone in a button has aria-label and title.

Don't

An icon-only button that a screen reader announces as just "button."

Do

A directional arrow with .rtl-flip.

Don't

Two separate icons for left and right.

Size in each place

<Icon> defaultsize 16 · strokeWidth 1.7
Page header pill15px.page-head-actions .btn svg
btn-sm14px
Field16pxList arrow 15px
Menu row15px · opacity 0.8
icon-btn without hover17px@media (hover: none)
Phone dock item20px≤ 720px
Selected option check14px · strokeWidth 2.4
  • <Icon> doesn't set aria-hidden on its own. An icon next to a label is decorative; an icon alone in a button should get its name from the button's aria-label.
  • Mirroring is done only with a class: [dir="rtl"] .rtl-flip { transform: scaleX(-1) }.

Related pages

Service logosService logos aren't icons and have rules of their own.RTL and languagesDirectional icons are mirrored in right-to-left.ButtonsAn icon next to a button label, or alone with aria-label.Mark and logoThe Flowra mark (FLOW_D) lives in this same file.Menu and sheetEvery menu row has its own icon.
PreviousKeyboard shortcutsNextService logos

Related pages

  • PageBrand kitThe Flowra mark and logo, colors, typography, clear space and minimum size, and the brand kit files to download.
  • PageDocumentationThe complete Flowra guide: actions, calendar, meetings, knowledge, files, Folio, chat, network, finance, connectors, settings and AI, each with its connections.
  • PageChangelogWhat each release added to Flowra, what got better, and what’s coming next.
  • PageContact usReach the right team: support, sales and plans, partnerships, careers, or security and privacy.
Flowra

Flowra is an all-in-one workspace for managing tasks, projects, finances, meetings, and teamwork, powered by AI to keep everything organized in one place.

Solutions for teams

  • Marketing teams
  • Product and dev teams
  • Design and content teams
  • Operations teams
  • Sales and services teams
  • Remote teams

Roles and flows

  • Project managers
  • Freelancers and consultants
  • Meeting to action
  • Actions with financial context
  • Actions with contract context
  • Brief to project delivery

With Flowra

  • All solutions
  • Pricing
  • Frequently asked questions
  • Documentation
  • Contact us
  • Brand kit
  • Design system
Crafted by Karo Studio
SecurityPrivacyTermsCookies
Version 0.16.0