University of Florida College of the Arts Pattern Library

Color Circle Icon: Chat 

<div class="color-circle-icon color-circle-icon--orange color-circle-icon--big">
    <span class="color-circle-icon__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
            <g id="chat">
                <mask id="mask0_4758_37148" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
                    <rect id="Bounding box" width="16" height="16" fill="#D9D9D9" />
                </mask>
                <g mask="url(#mask0_4758_37148)">
                    <path id="chat_2" d="M3.99967 9.3335H9.33301V8.00016H3.99967V9.3335ZM3.99967 7.3335H11.9997V6.00016H3.99967V7.3335ZM3.99967 5.3335H11.9997V4.00016H3.99967V5.3335ZM1.33301 14.6668V2.66683C1.33301 2.30016 1.46356 1.98627 1.72467 1.72516C1.98579 1.46405 2.29967 1.3335 2.66634 1.3335H13.333C13.6997 1.3335 14.0136 1.46405 14.2747 1.72516C14.5358 1.98627 14.6663 2.30016 14.6663 2.66683V10.6668C14.6663 11.0335 14.5358 11.3474 14.2747 11.6085C14.0136 11.8696 13.6997 12.0002 13.333 12.0002H3.99967L1.33301 14.6668ZM3.43301 10.6668H13.333V2.66683H2.66634V11.4168L3.43301 10.6668Z" fill="white" />
                </g>
            </g>
        </svg>
    </span>
</div>
 
<div class="color-circle-icon color-circle-icon--{{ background|default('orange') }} color-circle-icon--{{ size|default('big') }}">
    {% if icon %}
        <span class="color-circle-icon__icon">
            {% include 'bits/icons/'~ icon.name ~'.twig' %}
        </span>
    {% endif %}
</div>
 
{
  "background": "orange",
  "icon": {
    "name": "chat"
  }
}
  • Content: 
    .color-circle-icon
    --backgroundColor orange
    --iconColor white
    --iconSize 24px

    &--orange
        --backgroundColor orange

    &--blue
        --backgroundColor blue500

    &--small
        --iconSize 16px

    &--big
        --iconSize 24px

    align-items center
    background-color var(--backgroundColor)
    border 2px solid var(--borderColor)
    border-radius 50%
    display flex
    justify-content center
    height 48px
    width 48px

    &__icon
        display flex

    &__icon > svg
        height var(--iconSize)
        width var(--iconSize)

    &__icon > svg > path
        fill var(--iconColor)
  • URL: /components/raw/color-circle-icon/color-circle-icon.styl
  • Filesystem Path: patterns/bits/color-circle-icon/color-circle-icon.styl
  • Size: 635 Bytes

No notes defined.